Custom Animations in jQuery

jQuery Custom Animations

The syntax of jQuery’s method for making custom animations is:

$(selector).animate({params},[duration],[easing],[call-back])

The key parameter is params , it defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:”70%”.opacity:0.4,marginLeft:”0.6in”,fontsize:”3em”});

The second parameter is duration. It specifies the speed of the animation. Possible values are “fast”,”slow”,”normal”,or milliseconds.

Example

<html>

<head>

$(document).ready(function(){

$(“button”).click(function() {

$(“div”).animate({height:300},”slow”);

$(“div”).animate({width:300},”slow”);

$(“div”).animate({height:100},”slow”);

$(“div”).animate({width:100},”slow”);

}};

</script>

</head>

<body>

<button>Start Animation</button>

</div>

</body>

</html>

Example

<html>

<head>

$(document).ready(function(){

$(“button”).click(function() {

$(“div”).animate({left:100px},”slow”);

$(“div”).animate({fontsize:”3em”},”slow”);

}};

</script>

</head>

<body>

<button>Start Animation</button>

<div style=”background:#98bf21;width:200px;height:100px;position:relative”>HELLOM</div>

</body>

</html>

Note

HTML elements are positioned static by default and cannot be moved. To make elements moveable, set the CSS position property to fixed, relative or absolute.