Effets jQuery - Glissement

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

Les méthodes d'effet jQuery nous permettent d'appliquer rapidement des effets courants avec le moins de configuration possible.

Méthodes jQuery de glissement

Avec jQuery, nous pouvons créer des effets de glissement sur les éléments.

Nous avons les méthodes jQuery suivantes :

• slideUp()

• slideDown()

• slideToggle()

Nous allons vous montrer comment utiliser chaque méthode de glissement.

jQuery slideUp() et slideDown()

slideUp()La méthode cache l'élément sélectionné de manière glissante.

slideDown()La méthode affiche l'élément sélectionné de manière glissante.

L'exemple suivant montre l'utilisation de la méthode slideUp() et slideDown() :

//　Glisser vers le haut du paragraphe
　$("#btn1).click(function() {
　　　　　　$("p").slideUp();
});
//　Glisser vers le bas du paragraphe
　$("#btn2).click(function() {
　　　　　　$("p").slideDown();
});

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

$("selector").slideUp(durée, éasing, retourDeFonction);

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

$("selector").slideDown(durée, éasing, retourDeFonction);

Peu importeslideUp()etslideDown()La méthode accepte trois paramètres optionnels :

• duration -Détermine le temps que durera l'effet de glissement. Les valeurs possibles sont : "slow", "fast" ou en millisecondes

• easing -Indique la fonction d'accélération à utiliser pour la transition. Les valeurs possibles sont : "swing", "linear"

• callback-Fonction à appeler après la fin de la méthode de glissement

L'exemple suivant montre l'utilisation de slideUp() et slideDown() avecdurationParamètres :

$("#btn1).click(function() {
　　$("p").slideUp(1500);
});
$("#btn2).click(function() {
　　$("p").slideDown(1500);
});

L'exemple suivant montre l'utilisation de slideUp() et slideDown() avecRetour de fonctionParamètres :

$("#btn1).click(function() {
　　$("div").slideUp(1500, function() {
　　　　alert("Glissement vers le haut terminé !");
　　});
});
$("#btn2).click(function() {
　　$("div").slideDown(1500, function() {
　　　　alert("Glissement vers le bas terminé !");
　　});
});

Animer tous les espaces (dans ce cas, les mots) pour glisser rapidement, en200 millisecondes pour terminer chaque animation :

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

la méthode jQuery slideToggle()

Nous pouvons également utiliserslideToggle()La méthode bascule entre les éléments HTML en glissant vers le haut et vers le bas.

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

L'exemple suivant, au clic sur le bouton, dans tous<p>Basculer entre slideUp et slideDown des éléments :

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

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

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

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

• duration -Détermine le temps que durera l'effet de glissement. Les valeurs possibles sont : "slow", "fast" ou en millisecondes

• easing -Indique la fonction d'accélération à utiliser pour la transition. Les valeurs possibles sont : "swing", "linear"

• callback-Spécifiez une fonction à appeler après la fin de l'exécution de la méthode slideToggle()

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.