Home Tutorial Ajax Jquery jQuery Animate

 
 

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

<html>

<head>

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

<script>

$(document).ready(function(){

$("#click").click(function(){

$("#animationblock").animate({

width: "50%",

opacity: 0.3,

marginLeft: "0.5in",

fontSize: "3em",

borderWidth: "8px"

}, 1500 );

});

 

});

</script>

<style>

div {

background-color:#45DDD8;

width:100px;

border:1px solid red;

}

</style>

</head>

<body>

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

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

</body>

</html>

 

online demo: jQuery animate
Advertisement

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
 

 

 

DMCA.com