CSS3+jQuery rotate and wiggle

Simple and concise way to leverage CSS3 (don’t work in IE7 <) effects. Using this currently to call out the primary call to action on a page.

$.fn.rotate = function(/* String */ deg) {
		return $(this).each(function() {
			$.each(["webkit", "moz", "ms", "o"], $.proxy(function(i,prefix) {
				$(this).css("-" + prefix +"-transform", "rotate(" + deg + "deg)");
			},this));
		});
	};
	
	$.wiggle = function(el, times, dir) {
		
		
		if(times === 0) {
			el.rotate(0);
			return;
		} 
		
		
		window.setTimeout(function() {
			
			el.rotate((dir? "-" : "") + "2"),
			$.wiggle(el, --times, !dir);
				
		}, 170);
	
	}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: