❮❮ PREV NEXT ❯❯

JQUERY - ANIMATED EFFECTS

The Animated Effects, as the name suggests is used to provide some cool animations to an HTML element. It is represented by animate() Function.

Now, let us look at the example that we have already seen.

The animate() effect has three parameters,

CSS element

Speed

Callback Function

Let us see them next.

animate() effect with CSS element

And all we are going to do is, there is an image of an Airplane and we are going to move it to the right.

Example :

 <html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to move the below image </button> <br/><br/>
		<img src="airplane.jpg" alt="Airplane" width="150" height="103" style="position:relative;">
	  
      	<script>
      
			$('button').click( function() { 
            	$('img').animate({left: '400px'});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there is a <button> element,

<button> Click to move the below image </button>

And an image (i.e. <img> element),

<img src="airplane.jpg" alt="Airplane" width="150" height="103" style="position:relative;">

So, we are placing the image of an Airplane and put the style property as position:relative;,

style="position:relative;"

As we want to move the image.

Now, on button click, we are going to move the above Airplane image to the right.

And this happened because of the click() event that was triggered by JQuery.

$('button').click( function() {
	$('img').animate({left: '400px'});
});

And if see the click() event, there is a function(An anonymous function) inside it.

function() {
	$('img').animate({left: '400px'});
}

And in the function, we have the animate() effect.

$('img').animate({left: '400px'});

All it does is, locates the <img> element and moves it to the right.

Note : left: '400px' says to move the image to a position that is 400px from the left side.

And the animate() effect moves the image slowly giving an impression that the Airplane is moving from left to right.

animate() Effect with animated speed

Now, let us modify the above example with the second parameter. i.e. The animated speed.

Example :

 <html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to move the below image </button> <br/><br/>
		<img src="airplane.jpg" alt="Airplane" width="150" height="103" style="position:relative;">
	  
      	<script>
      
			$('button').click( function() { 
            	$('img').animate({left: '400px'},3000);
            });
            
      	</script>      
  	</body>
</html>

Output :

So, we have modified the JQuery statement with the second parameter that determines the animated speed.

Now, if you see the above output, the Airplane moves from left to right, but at a lower speed. And that is determined by the second parameter value i.e. 3000.

animate() Effect with speed and 'callback function'

Now, let's say, you want to display a message, after the Airplane stopped moving.

And you can achieve it using a callback function.

Example :

 <html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<button> Click to move the below image </button> <br/><br/>
		<img src="airplane.jpg" alt="Airplane" width="150" height="103" style="position:relative;">
	  
      	<script>
      
			$('button').click( function() { 
            	$('img').animate({left: '400px'}, 3000, function(){
            		alert("The animate effect is completed")
            	});
            });
            
      	</script>      
  	</body>
</html>

Output :

So, we have modified the JQuery statement with the third parameter that is a callback function.

Now, if you see the callback function,

function() {
	alert("The animate effect is completed")
}

It displays an alert,

alert("The animate effect is completed")

When the Airplane stops moving, stating the animate effect is complete.

❮❮ PREV NEXT ❯❯