Custom Effects with $.fn.animate

Contact Us or call 1-877-932-8228
Custom Effects with $.fn.animate

Custom Effects with $.fn.animate

jQuery makes it possible to animate arbitrary CSS properties via the $.fn.animate method. The $.fn.animate method lets you animate to a set value, or to a value relative to the current value.

Custom effects with $.fn.animate

Code Sample:

---- C O D E   O M I T T E D ----
<div id="div1" class="funtimes">Fun</div>
<div id="div2" class="funtimes">Fun</div>
<script src="../../jqy-libs/jquery.js"></script> 
		left : "+=300",
		opacity : 0.25
	1000, // duration
	function() { console.log('done 1!'); // callback
		top : "+=300",
		width : 400
	1500, // duration
	function() { console.log('done 2!'); // callback

Note: Color-related properties cannot be animated with $.fn.animate using jQuery out of the box. Color animations can easily be accomplished by including the color plugin. We'll discuss using plugins later in the book.


Easing describes the manner in which an effect occurs -- whether the rate of change is steady, or varies over the duration of the animation. jQuery includes only two methods of easing: swing and linear. If you want more natural transitions in your animations, various easing plugins are available.

As of jQuery 1.4, it is possible to do per-property easing when using the $.fn.animate method.

Per-Property Easing

		left : [ '+=50', 'swing' ],
		opacity : [ 0.25, 'linear' ]

For more details on easing options, see