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>
<script type=”text/javascript” src=”jQuery.js”></script>
<script type=”text/javascript”>
$(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>
<br/><br/>
<div style=”background:#98bf21;width:100px;height:100px;position:relative”>
</div>
</body>
</html>
Example
<html>
<head>
<script type=”text/javascript” src=”jQuery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function() {
$(“div”).animate({left:100px},”slow”);
$(“div”).animate({fontsize:”3em”},”slow”);
}};
}};
</script>
</head>
<body>
<button>Start Animation</button>
<br/><br/>
<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.
