Setting up HTML and including jQuery
To start using jQuery in your project, you need to include it inside the script tag, we are using the Google Hosted jQuery with the following line:
</script>
After this line has been added to the HTML file, we can start writing jQuery code
The animate() method
The animate method that is offered by jQuery is used to create very basic but yet attractive animation on your webpage. This function takes three arguments:
- A required parameter which is the animation
- A speed (optional) parameter which defines the speed of the animation
- A callback(optional parameter) which as the name indicates is the callback function
Syntax of the animate() method
The syntax is pretty straight-forward as already explained above
To demonstrate this, we are going to create a button and a div in our HTML file using the following lines:
This will give us the following result on your browser:
For the jQuery code, we are going to turn the opacity of the div down to 0.7 but we are going to do it in 2 seconds using the following lines of code:
$("div:last").animate(
{
opacity: "0.5",
},
2000
);
});
As you can notice, we have wrapped the animate method in a click event method so that our animation is invoked only when we click the button. Upon pressing the button, we get the following result:
As you can see, we were able to animate the opacity using the animate method.
The show() and hide() method
These methods are used to show and hide elements of a webpage, The syntax of both of these functions is almost identical as:
[jQuerry_Selector $( )].hide(animation_speed,callback_function);
To demonstrate this, type in the following lines in our HTML file:
You will see the following webpage on your web-browser:
As you can see, we have a div with some text inside of it along with two buttons that will use these hide and show animations respectively.
For the jQuery part, use the following lines of code in your JavaScript file:
$("#demo").show(2000);
});
$("#hide").click(function () {
$("#demo").hide(2000);
});
Notice: We have passed the time as 2 seconds, otherwise the change will be instant and we won’t get an animation like effect.
Execute the file and click on the Hide button and you will get the following result:
As you can see, we get an attractive animation, the next step is to test the show animation by clicking on the show button. So, click on the show button and you will get the following results:
As you can see, we get a smooth unhide\show animation
The slide() method:
We can get a smooth slide transition with the jQuery library as well. We get three function for the slide animation, these are namely :
- slideUp()
- slideDown()
- slideToggle()
To demonstrate this we are going to implement a slideToggle() method, use the following lines in the HTML file:
For the jQuery code, use the following lines in the javaScript file:
$("#demo").slideToggle("slow");
});
You get the following result on the screen:
As you can see, we have a quick and smooth slide toggle animation using jQuery. Apart from these, jQuery provides a whole bunch of other animation methods which you can try out.
Conclusion
jQuery comes with some attractive effects and animation methods which really make a webpage stand out. jQuery is focused on making coding various methods, selectors and animation concise for the web developer. That is why some of the most commonly used animations are wrapped in different functions that can be invoked whenever the user wishes. Today, in this post, we went over how to use jQuery to implement some of the animations\effects on our webpage.
