jQuery fait entrer et sortir les éléments pour rendre l'effet plus vif_jquery

Pour obtenir un effet plus vif, vous pouvez faire apparaître ou disparaître un élément en fondu, dans les deux cas en modifiant simplement la transparence de l'élément au fil du temps. jQuery fournit 3 fonctions liées au fondu entrant et sortant :

·fadeIn() fait apparaître un élément caché en fondu. Dans un premier temps, l'espace occupé par l'élément apparaît sur la page (ce qui peut vouloir dire que d'autres éléments de la page sont éloignés) ; ensuite, l'élément devient progressivement visible ; Si l'élément est déjà visible sur la page, cette fonction n'a aucun effet. Si aucune valeur de vitesse n'est fournie, l'élément apparaît en fondu en utilisant le paramètre "normal" (400 millisecondes).

·fadeOut() masque un élément visible en le faisant disparaître fantomatiquement hors de vue. Si l'élément est déjà masqué sur la page, cette fonction n'a aucun effet, tout comme la fonction fadeIn(). Si aucune valeur de vitesse n’est fournie, l’élément disparaît au bout de 400 millisecondes.

·fadeToggle() combine les effets de fondu d'entrée et de fondu de sortie. Si l'élément est actuellement masqué, il disparaît ; s'il est actuellement visible, l'élément disparaît. Vous pouvez utiliser cette fonction pour faire apparaître ou disparaître une info-bulle sur la page. Par exemple, supposons que vous disposiez d’un bouton qui affiche le mot « instructions ». Lorsqu'un visiteur clique sur le bouton, un div avec la description disparaîtra ; en cliquant à nouveau sur le bouton, la description disparaîtra. Pour faire apparaître ou disparaître la boîte de dialogue toutes les demi-secondes, vous pouvez écrire le code comme ceci :

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·La façon dont fadeTo() fonctionne est légèrement différente des deux autres fonctions d'effet. Il atténue l'image jusqu'à une certaine transparence. Par exemple, vous pouvez faire en sorte que l'image devienne semi-transparente. Contrairement aux autres effets, une valeur de vitesse doit être fournie. De plus, une valeur comprise entre 0 et 1 est fournie pour représenter la transparence de l'élément. Par exemple, pour fondre tous les paragraphes à 75 % de transparence, vous pouvez écrire le code comme ceci :

$('p').fadeTo('normal'，.75);

Cette fonction modifie la transparence d'un élément, que l'élément soit visible ou invisible. Par exemple, supposons que vous souhaitiez fondre un élément actuellement masqué jusqu'à une transparence de 50 %. Ensuite, si l'élément est affiché à l'aide de show() ou fadeIn(), il sera affiché avec 50 % de transparence. De même, si vous masquez un élément translucide puis l'affichez, son paramètre de transparence est restauré.