JavaScript

jQuery Effects | Explained

jQuery (if you are not already familiar with it) is a JavaScript library that contains commonly used functionalities of a webpage wrapped in different functions. Thus providing a time-saving interface for the web developer. jQuery also provides a time-saving interface to create animations and transitional effects with close to no configuration (most functions take 2 arguments at max). jQuery contains various types of functions including selectors, events, and effects. In this post, we are going to discuss various types of effects that are provided by jQuery, their syntax along with their example

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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">

</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

[jQuerry_Selector $( )].animate({parameter},animation_speed,callback_function);

To demonstrate this, we are going to create a button and a div in our HTML file using the following lines:

<center>

<div>Hello! I am LinuxBot</div>

<button>Click me!</button>

</center>

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:

$("button").click(function () {
  $("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 $( )].show(animation_speed,callback_function);

[jQuerry_Selector $( )].hide(animation_speed,callback_function);

To demonstrate this, type in the following lines in our HTML file:

<center>

<div id="demo">I can disappear and reappear</div>

<button id="hide">Hide</button>

<button id="Show">Show</button>

</center>

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:

$("#Show").click(function () {
  $("#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:

<center>

<div id="demo">I can disappear and reappear</div>

<br />

<button id="toggle">Click me to toggle slide</button>

</center>

For the jQuery code, use the following lines in the javaScript file:

$("#toggle").click(function () {
  $("#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.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.