Saturday, January 29, 2011

Curved / ellipse shaped animations

$('.element').animate( {...}, speed, 'ellipse' );

/*
* jQuery.fn.animate(ellipse);
*
* Make circle, ellipse shaped animations using only:
* $('.element').animate({ top:200, left: 200 }, 2000, 'ellipse');
*
* Version 0.3.4
* www.labs.skengdon.com/animate.ellipse
* www.labs.skengdon.com/js/animate.ellipse.min.js
*
*/
Simple usage 1
HTML
jQuery
$('.element').stop().animate( { top:200, left:600 } , 1000 , 'ellipse');
Simple usage 2 (with callback)
HTML
jQuery
$('.element').stop().animate( { top:200, left:600 } , 1000 , 'ellipse' , function() {
$(this).animate( { top:300, left:300 } , 1000 , 'ellipse' , function() {
$(this).animate( { top:200, left:0 } , 1000 , 'ellipse' , function() {
$(this).animate( { top:100, left:300 } , 1000 , 'ellipse' , function() {
alert('all done!');
})
})
})
});
Simple usage 3 (flip curve)
HTML
jQuery
$('.element').stop().animate( { top:200, left:600, flip: true } , 1000 , 'ellipse');

Popular Posts