Learning jQuery

Animation 

Animation looks pleasing to the eye, but creating animation is not an easy job. It’s important to take into account the effect that animations can have on performance, as even the coolest animations can have negative effects and downgrade user experience. Luckily, jQuery has some inbuilt methods to implement simple animations with ease. These methods are named in such a way that they are clearly labeled for their use and functionality. In this short post, we’ll look at each of these methods in action.
These animation methods have one thing in common - accepted parameters. The following 3 parameters are applicable for all methods:

• Duration: Optional parameter. Either string or number specifications can be used to determine the amount of time given for the animation to complete. The default value is 400 milliseconds. It also accepts “slow” or “fast” string values where “fast” indicates duration of 200 milliseconds and “slow” indicates 600 milliseconds. 
• Easing: Optional. Easing indicates the speed of the animation at different points during the animation. jQuery provides inbuilt swing and linear easing functions to help you play with this parameter. 
• Callback: Optional. A function that may be executed after the animation is complete.

fadeIn()

The fadeIn() method gradually changes the opacity of the selected element from hidden to visible. It changes the opacity value from 0 to 1. It will not work on hidden items. To use this method,

$("#elm").fadeIn("fast");
$("#elm").fadeIn(1000); // 1 second

fadeOut()

As you may have guessed, this is the opposite of fadeIn(). This method gradually changes the opacity of the selected element from visible to hidden. It changes the opacity value from 1 to 0. Once the opacity reaches 0, the jQuery set display property is set to none. To use this method:

$("#elm").fadeOut("slow");
$("#elm").fadeIn(2000); // 2 seconds

fadeTo()

The fadeTo() method is similar to the fadeIn() method but it gives the option to control the opacity of the element. You can specify the opacity value, as shown here:

$("#elm").fadeTo("slow", 0.3); //The opacity value is 0.3

The above code will change the opacity of the element gradually to 0.3.

fadeToggle()

This method is a combination of fadeIn() and fadeout(). If the elements are faded out, fadeToggle() will fade them in and when the elements are faded in, fadeToggle() will fade them out. Like this:

$("#elm").fadeToogle("slow");
$("#elm").fadeToggle("slow", function(){
 console.log("The fadeToggle is finished!");
 });

slideUp()

The slideUp() method slides-up the selected element to hide it. This method internally controls the height of the element. Once the height reaches 0, it sets the display property to none in order to hide it. To implement it, use the following code:

$("#elm").slideUp(); //Uses default value of 400 milliseconds for duration.
$("#elm").slideUp(500);

slideDown()

This method works opposite to the slideUp() function. It slides-down the selected element to show it. This method changes the height of the matched elements from 0 to the specified maximum height. Thus, it gives the element a slide down effect. To implement it, use the following code:

$("#elm").slideDown(); //Uses default value of 400 milliseconds for duration.
$("#elm").slideDown(1000);

slideToggle()

This method is a combination of slideUp() and slideDown(). Internally this method also makes use of the display style property. While sliding up, when the height of the element reaches 0 it sets the display style property to "none". While slide down it sets the "inline" value of the display property. Based on the value of the display property, it determines whether to slide up or down. To implement it:

$("#elm").slideToggle("slow", function() {
 console.log("Animation complete.");
});

Bonus tip: If you want to disable all the animation, set jQuery.fx.off property to ‘true’. This is quite useful when your jQuery code uses animation heavily and you need to disable it. Instead of visiting every single line and modifying it, it’s better to use this property to disable animation completely.

Conclusion

This post talks briefly about various inbuilt animation methods available in jQuery. These methods can perform animations like fading and sliding in both directions. These methods also accept duration to control the speed of your animation. They are simple to use and allow you to implement simple animation with hardly any effort. Have fun playing with them!