Effets jQuery- Masquer et afficher

jQuery fournit une interface simple pour exécuter divers effets étonnants.

Les méthodes d'effet jQuery nous permettent de réaliser rapidement des effets courants avec un minimum de configuration.

jQuery hide() et show()

Vous pouvez utiliserhide()etshow()Les méthodes hide() et show() masquent et affichent les éléments HTML.

L'exemple suivant montre l'utilisation des méthodes hide() et show() :

//　Masquer le paragraphe affiché
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Afficher le paragraphe masqué
$("#show-btn").click(function(){
　　$("p").show();
});

C'esthide() La syntaxe de la méthode :

$(selector).hide(duration,　easing,　callback);

C'estshow()La syntaxe de la méthode :

$(selector).show(duration,　easing,　callback);

hide()etshow()La méthode accepte trois paramètres optionnels :

• duration -Déterminer l'effet quiDuréedurée. Les valeurs possibles sont : "slow", "fast" ou en millisecondes

• easing -Indiquer la fonction d'accélération utilisée pour la transition. Les valeurs possibles sont : « swing », « linear »

• callback-Fonction à appeler après l'exécution de la méthode spécifiée

L'exemple suivant montre hide() et show() par l'intermédiaire dedurationParamètres :

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

L'exemple suivant utilise hide() et show() pour démontrerRetour de fonctionParamètres :

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV est masqué");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV est affiché");
　　});
});

l'animation de toutes les étendues (dans cet exemple, les mots) est rapidement masquée, en200 millisecondes pour chaque animation :

$("button").click(function(){
　　$("span:last-child").hide("fast",　function(){
$(this).prev().hide("fast",　arguments.callee);
　　});
});

Méthode jQuery toggle()

Nous pouvons également utilisertoggle()La méthode bascule entre le cacher et le montrer des éléments HTML.

Si l'élément sélectionné est initialement visible, il sera caché ; s'il est caché, il sera montré.

L'exemple suivant cache et montre tous les éléments sélectionnés au clic du bouton<p>Passage entre éléments :

$("button").click(function(){
　　$("p").toggle(1500);
});

toggle()La syntaxe de la méthode est la suivante :

$(selector).toggle(duration, easing, callback);

toggle()La méthode accepte trois paramètres optionnels :

• duration　 -Déterminer l'effet quiDuréeDurée. Les valeurs possibles sont : « slow », « fast » ou en millisecondes

• easing -Indiquer la fonction d'accélération utilisée pour la transition. Les valeurs possibles sont : « swing », « linear »

• callback-Fonction à appeler après l'exécution de la méthode spécifiée

Référence des effets jQuery

Pour une référence complète des effets, veuillez visiter notreManuel de référence des effets jQuery.