Plier / Déplier

Dans cette partie, nous verrons les méthodes .slideDown(), .slideUp() et .slideToggle(). Elles permettent de plier et déplier des éléments avec une animation de fondu.

Méthode .slideDown()

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

La méthode .slideDown() permet de déplier un élément avec une transition.

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

Exemple :

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

Un autre exemple :

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

Méthode .slideUp()

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

La méthode .slideUp() permet de replier un élément avec une transition.

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

Exemple :

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

Un autre exemple :

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

Méthode .slideToggle()

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

La méthode .slideToggle() permet de plier / déplier un élément avec une transition.

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

Exemple :

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

Un autre exemple :

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