❮❮ PREV NEXT ❯❯

JQUERY - EFFECTS

Say, you have installed an app in your smart phone and it opened with a cool animation.

Would you love it ?

I mean YES! Who would't love an animated background.

And JQuery also provides us with some cool animations and some super cool stuff that you can apply in your website.

And these are called Effects in JQuery.

Let us quickly jump into a practical example and simplify it.

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.

So, that was a simple animated effect provided by JQuery. But Effects are not restricted to animation.

There are other cool effects like display effect, fade effect, slide effect e.t.c.

❮❮ PREV NEXT ❯❯