Les fondus

Dans cette partie nous verrons les méthodes .fadeIn(), .fadeOut(), .fadeToggle()et.fadeTo()`. Elles permettent de faire apparaître ou disparaître des éléments avec une animation de fondu.

Méthode .fadeIn()

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

La méthode .fadeIn() permet de faire apparaître les éléments avec une animation de fondu.

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

Exemple :

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

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

Méthode .fadeOut()

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

La méthode .fadeOut() permet de faire disparaître les éléments avec une animation de fondu.

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

Exemple :

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

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

Méthode .fadeToggle()

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

La méthode .fadeToggle() permet de faire apparaître / disparaître les éléments avec une animation de fondu.

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

Exemple :

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

Un autre exemple :

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

Méthode .fadeTo()

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

La méthode .fadeTo() permet de modifier l'opacité d'un élément avec un effet de transition.

$(selecteur).fadeTo(vitesse,opacité,callback);

Exemple :

$('#fadeTo').click(function(){
    $('#b').fadeTo(1000, 0.25);
    $('#c').fadeTo('slow', 0.25);
    $('#d').fadeTo('slow', 0.25, function(){
        console.log('Élément #d à une opacité de 25%');
    });
});