Home Tutorial Ajax Jquery jQuery Animate


Share on Google+Share on Google+
jQuery Animate
Posted on: December 3, 2009 at 12:00 AM
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

Related Tags for jQuery Animate:

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.

Posted on: December 3, 2009

Recommend the tutorial

Advertisements Advertisements