JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 11 The animate Method


The animate() method is used to create animation on a selected element. You need to use the params parameter for defining the CSS properties to be animated.You can also add a speed parameter fast, slow or milliseconds to specify the speed of sliding down the element.

Example 11.1

This example move an image to the right.

By default, an HTML element has a static position, and cannot be moved. To manipulate the position, you need to set the CSS position property of the element to relative, fixed, or absolute.

<!DOCTYPE html>
<html>
<head>
<script>
 $("#btn1").click(function(){
        $("#lady1").animate({left: '500px'});
    });
});
</script>
</head>
<body>
<button id="btn1">Click to move the image to the right</button><br>
<img id="lady1" src="ladybug.gif" style="width:10%; height:auto; position:relative;">
</body>
</html>



Example 11.2

This example demonstrates how to animate an html element by manipulating myultiple CSS properties.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn2").click(function(){
   $("#lady2").animate({
   left: '500px',
   height: '20%',
   width: '20%'
    });
	   });
});
</script>
</head>
<body>
<button id="btn2">Click to slide up the image</button><br>
<img id="lady2" src="ladybug.jpg" style="width:50%; height:auto">

</body>
</html>



Example 11.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
   $("#p1").animate({
   left: '300px',
   fontSize: '3em',
      });
});
});
</script>
</head>
<body>
<button id="btn3">Click to move and magnify the text below</button><br>
<p id="p1" style=" position:relative;">Move and magnify Me.</p>

</body>
</html>



Move and magnify Me.

Example 4

You can add the speed parameter using the following method. It involves declaring a variable for the selected element.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
    var myImg = $("#lady3");  
        myImg.animate({left: '500px'}, "fast");
        myImg.animate({height: '20%'}, "slow");
		 myImg.animate({width: '20%'}, "3000");
    });
	  
});
</script>
</head>
<body>
<button id="btn4">Click to slide up the image</button><br>
<img id="lady3" src="ladybug.jpg" style="width:50%; height:auto">

</body>
</html>






Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy