Effets jQuery - Entrée et sortie

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 un minimum de configuration.

Méthodes d'effet d'entrée et de sortie jQuery

Avec jQuery, nous pouvons réaliser des effets d'entrée et de sortie.

Nous avons les méthodes suivantes de jQuery pour l'effet d'entrée et de sortie :

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

Dans la section suivante, nous vous montrerons comment utiliser chaque méthode d'effet d'entrée et de sortie.

jQuery fadeIn() et fadeOut()

jQuery fadeIn()La méthode change progressivement l'opacité de l'élément sélectionné de caché à visible.

jQuery fadeOut()La méthode change progressivement l'opacité de l'élément sélectionné de visible à caché.

Le prochain exemple montre l'utilisation des méthodes fadeIn() et fadeOut() :

//　Fonctionne en fade-out pour les paragraphes visibles
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　Fonctionne en fade-in pour les paragraphes cachés
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

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

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

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

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

peu importefadeIn()etfadeOut()La méthode accepte trois paramètres optionnels :

• duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒

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

• callback-Spécifie la fonction à appeler après la fin de l'animation d'effet淡入淡出

Les exemples suivants montrent l'utilisation de fadeIn() et fadeOut() avecduration参数：

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

Les exemples suivants montrent l'utilisation de fadeIn() et fadeOut() avec回调参数：

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600,　function(){
　　　　$("h3").text("Sortie terminée.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600,　function(){
　　　　$("h3").text("Entrée terminée.");
　　});
});

Applique une animation à tous les espaces (dans ce cas, les mots) pour les faire rapidement s'estomper et dans200 millisecondes pour terminer chaque traitement d'animation :

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

La méthode fadeToggle() de jQuery

Nous pouvons également utiliserfadeToggle()La méthode bascule entre l'entrée et la sortie de l'élément HTML.

Si l'élément sélectionné sort,fadeToggle()le faire entrer en phase d'entrée.

Si l'élément sélectionné entre en phase d'entrée,fadeToggle()les les faire fondre.

Le suivant est un exemple qui s'applique à tous<p>Basculer entre l'effet d'entrée et de sortie de l'élément :

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

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

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

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

• duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒

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

• callback-Spécifie la fonction à appeler après la fin de l'animation d'effet淡入淡出

La méthode fadeTo() de jQuery

jQuery fadeTo()La méthode fait progressivement passer l'opacité de l'élément sélectionné à l'opacité spécifiée.

Attention :LefadeTo()La méthode ne change pas la mise en page de la page (l'élément sélectionné continuera à occuper l'espace précédemment utilisé).

Dans cet exemple, la méthode diminue progressivement<div>L'opacité de l'élément :

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

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

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

参数：

• duration -确定淡入淡出效果将持续多长时间。可能的值：“ slow”，“ fast”或毫秒

• opacity-指定要淡入的不透明度。必须是介于0.00和1.00之间的数字

• easing -（可选）指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”

• callback-（可选）指定淡入淡出方法完成后要调用的函数

下面的示例演示了带有fadeTo()的回调参数：

$("button").click(function(){
　　$("div").fadeTo(500,　0,　function(){
　　　　alert("透明度降低!!!");
　　});
});

jQuery效果参考

有关完整的效果参考，请访问我们的jQuery Effects 参考手册。