jQuery effects tutorial

December 5, 2013 JS / jQuery, Programming

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery effects tutorial

In this tutorial we will talk about jquery effects. For building interactive web applications you need to be able to show, hide, animate elements on your page. For this, jquery comes with a great set of methods for easing your work. This tutorial covers all the important jQuery methods to create visual effects.

We will structure them in a few blocks:

showing and hiding elements
toggle-ing elements
more complex animations

Showing and hiding elements

For this job we will use two common and suggestive jquery methods called “show” and “hide”.

Parameters:

.show( [duration ] [, complete ] )

Example:

First, we create in the DOM a span element and give to it the “display:none” css property like this:

<span id="element">Just for testing purposes</span>

1	<span id="element">Just for testing purposes</span>

#element {
    display:none;
}

#element {

display:none;

}

There, the element exists but is not visible. Then, let’s say if we click on another element with id “trigger”, we show our span element. Let’s see how:

$('#trigger').click(function(){
    $('#element').show();
});

$('#trigger').click(function(){

$('#element').show();

});

First, we select the trigger, call the click event as we learned in a previous tutorial about jquery events, and then inside the function that is given as a parameter, we select our desired element and show it. Pretty simple.

The hide method works in the same way, but instead it will hide the element if it is visible, not show (because it is already).

$('#trigger').click(function(){
    $('#element').hide();
});

$('#trigger').click(function(){

$('#element').hide();

});

Toggle-ing elements

jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown. Basically it will play around with show and hide.

Here is the description of all the parameters:

speed: A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).
callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example:

$('#trigger').click(function(){
    $('#element').toggle();
});

$('#trigger').click(function(){

$('#element').toggle();

});

More complex animations

Below is a list with animations that can be performed on DOM elements.

animate( params, [duration, easing, callback] )
A function for making custom animations.

fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.

fadeOut( speed, [callback] )
Fade out all matched elements by adjusting their opacity to 0, then setting display to “none” and firing an optional callback after completion.

fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

slideDown( speed, [callback] )
Reveal all matched elements by adjusting their height and firing an optional callback after completion.

slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

slideUp( speed, [callback] )
Hide all matched elements by adjusting their height and firing an optional callback after completion.

stop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements.

jQuery.fx.off
Globally disable all animations.

Let’s talk about some of them separately:

.fadeIn and .fadeOut

Like show and hide, these two methods have similar behavior but they are more “fancy” let’s say. The are not directly showing and hiding an element, but instead they are fading in and out the opacity of the element until it gets visible/hidden.

Syntax:

selector.fadeIn( speed, [callback] );

Parameters:

Here is the description of all the parameters used by this method:

speed: A string representing one of the three predefined speeds (“slow”, “def”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).
callback: This is optional parameter representing a function to call once the animation is complete.

Example:

$('#trigger').click(function(){
    $('#element').fadeIn();
});

$('#trigger').click(function(){

$('#element').fadeIn();

});

.slideUp and .slideDown

Unlike fadeIn and fadeOut, these two methods are using an animation to finally show/hide an element, but instead of fading in and out, it is sliding from top to bottom and viceversa. You try it like we did for the other ones, it’s fun.

.animate

This is probably a little bit more complex than the others, not because of usage, but because of what you can do with it. You can animate the width or height of given elements, or you can animate their color or almost any other css property.

Syntax:

(selector).animate({styles},speed,easing,callback)

$('#trigger').click(function(){
    $('#element').animate({height: "200px"});
});

$('#trigger').click(function(){

$('#element').animate({height: "200px"});

});

The above code, when triggered, animates the height of our given span. You can animate also the width or other stuff. Try it and find all the possibilities, you will be surprised.

Summary

We covered the most important animations that you can do with plain jquery. In the next tutorial we will go deeper into animations, and we will talk about jquery ui based animations.

jquery effects