Animations¶

With jQuery you can perform animations on elements. You can use the methods defined in jQuery, but you can also create your own animations.

Hide/show an item¶

Methods hide() and show()¶

Using the hide() and show() methods you can hide and show elements. The hide() method is used to hide elements, and the show() method to show them. Both methods can take two parameters. The first one is the speed of hiding/placing the element. The second is the function that is executed when the methods are finished.

$('#hide').click(function() {
    $('p').hide('slow');
});

$('#show').click( function() {
    $('p').show('fast');
});

Methods fadeIn() and fadeOut()¶

Using the fadeIn() and fadeOut() method, you can smoothly show and hide elements on the page. These methods take the same parameters as the show() and hide() methods.

$('#hide').click(function() {
    $('p').fadeOut('slow');
});

$('#show').click(function() {
    $('p').fadeIn('fast');
});

Methods slideUp() and slideDown()¶

Using the slideUp() and slideDown() method, you can smoothly roll up and down the elements. These methods take the same parameters as the methods listed above.

$('#hide').click(function() {
    $('p').slideDown('slow');
});

$('#show').click(function() {
    $('p').slideUp('fast');
});

Your own animations¶

In jQuery you can create custom animations using the animate method.

$(selector).animate({params}, speed, callback);

This method accepts the following arguments:

• params - CSS properties to be animated
• speed - speed of animation
• callback - a function that will be performed when the animation is finished.

$('button').click(function() {
    $('div').animate({left: '250px'});
});

$('button').click(function() {
    $('div').animate({
        left: '250px',
        opacity: '0.5',
        height: '150px'
    });
});

$('button').click(function() {
    $('div').animate({left: '100px'}, 'slow');
    $('div').animate({fontSize: '3em'}, 'slow');
});