Lesson 11 The animate Method

❮ Previous Lesson Next Lesson ❯

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 moves 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 multiple 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 move the image to the right and enlarge it.</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 11.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>

❮ Previous Lesson Next Lesson ❯