Share on Google+Share on Google+

jQuery Animate

This example shows A function for making custom animations.

jQuery Animate:

This example shows A function for making custom animations.

In this example each key within the object represents a style property that will also be animated as you see in this example "height", "top" and "opacity" are animated. Properties should be specified using camel case, like as. "marginLeft" instead of "margin-left".

So that when we click on the button the margin, top and opacity are animated which are inside a div. Only properties that take numeric values are supported means backgroundColor is not supported.

Full Code :



<script src="../plugin/jquery.js"></script>





width: "50%",

opacity: 0.3,

marginLeft: "0.5in",

fontSize: "3em",

borderWidth: "8px"

}, 1500 );






div {



border:1px solid red;





<button id="click">click here</button>

<div id="animationblock">start animation..</div>




online demo: jQuery animate


Posted on: December 3, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.