fade
Effectue une apparition en fondu (apparition progressive).
fade(), fade('in') et fadeIn() permettent de faire un fondu d'apparition.
fadeOut() et fade('out') permettent de faire un fondu de disparition.
Il est possible de passer des paramètres à fade, fadeIn et fadeOut. Soit le premier paramètre est une liste de propriétés de style, alors ces propriétés seront animées en même temps que le fondu et les paramètres facultatifs seront alors dans cet ordre : durée (exemples : 500, "fast", ["slow","square"], [800,1.3]), fonction à exécuter à la fin du fondu, fonction à exécuter à chaque pas.
Soit le premier paramètre fourni est une durée valide (cf. les exemples ci-dessus) alors les paramètres suivants sont : fonction à exécuter à la fin du fondu, fonction à exécuter à chaque pas.
Quelques exemples :
// Premier cas :
$('div').fade('width:200'); // La largueur s'animera en même temps que le fondu
$('div').fade('width:200;height:100'); // La largueur et la hauteur s'animeront en même temps que le fondu
$('div').fade(['width:200','height:100']);
$('div').fade({width:200,height:100});
// Les 3 précédentes lignes ont le même effet
$('div').fade(
'width:200',
800, // Fondu de 800 ms
);
$('div').fade(
'width:200',
800,
function ()
{
// Code exécuté à la fin du fondu
}
);
$('div').fade(
'width:200',
800,
function ()
{
// Code exécuté à la fin du fondu
},
function ()
{
// Code exécuté à chaque pas de l'animation
}
);
// Second cas
$('div').fade('slow'); // slow vaut 800 ms par défaut
$('div').fade(['slow','root']); // lentement avec un courbe d'accélération en racine carrée
$('div').fade(
['slow','root'],
function ()
{
// Code exécuté à la fin du fondu
}
);
$('div').fade(
['slow','root'],
function ()
{
// Code exécuté à la fin du fondu
},
function ()
{
// Code exécuté à chaque pas de l'animation
}
);