Cacher / Afficher

Dans cette partie, nous verrons les méthodes .hide(), .show() et .toggle().

Elles permettenet de faire apparaître ou disparaître des éléments avec une animation.

Ces méthodes peuvent prendre comme paramètres :

1. une vitesse
2. un callback

Méthode .hide()

API : http://api.jquery.com/hide/

La méthode .hide() permet de cacher les éléments.

$(selecteur).hide(vitesse,callback);

Exemple :

$('#hide').click(function(){
    $('#a').hide();
    $('#b').hide(1000);
    $('#c').hide('slow');
    $('#d').hide('slow', function(){
        console.log('Élément #d est caché');
    });
});

Un autre exemple :

8ee the Pen mehai by Sutterlity (@sutterlity) on CodePen.

Méthode .show()

API : http://api.jquery.com/show/

La méthode .show() permet d'afficher les éléments.

$(selecteur).show(vitesse,callback);

Exemple :

$('#show').click(function(){
    $('#a').show();
    $('#b').show(1000);
    $('#c').show('slow');
    $('#d').show('slow', function(){
        console.log('Élément #d est affiché');
    });
});

Un autre exemple :

See the Pen rfkcI by Sutterlity (@sutterlity) on CodePen.

Méthode .toggle()

API : http://api.jquery.com/toggle/

La méthode .toggle() permet de cacher / afficher les éléments.

$(selecteur).toggle(vitesse,callback);

Exemple :

$('#toggle').click(function(){
    $('#a').toggle();
    $('#b').toggle(1000);
    $('#c').toggle('slow');
    $('#d').toggle('slow', function(){
        console.log('Élément #d est caché/affiché');
    });
});

Un autre exemple :

See the Pen .toggle by Sutterlity (@sutterlity) on CodePen.