1. Utiliser les fonctions d'animation de base
Les fonctions d'animation de base sont principalement divisées en trois catégories : afficher, masquer et basculer, qui fournissent toutes des paramètres. versions gratuites. Indique que le changement d'animation n'est pas applicable à l'état d'affichage de l'élément :
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle(); fournit deux surcharges de paramètres. La fonction de rappel pouvant être omise, vous pouvez transmettre une valeur comme seul paramètre utilisé. dans l'exemple d'ouverture, alors L'élément sera affiché/masqué avec des effets d'animation dans le temps spécifié par le paramètre :
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");Si 200 est passé, cela signifie que le calque sera affiché à travers un dégradé dans les 200 millisecondes . Le paramètre de vitesse peut utiliser trois vitesses prédéterminées. Une des chaînes (« lente », « normale » ou « rapide ») ou la valeur en millisecondes représentant la durée de l'animation (telle que :
Les trois). les fonctions peuvent être transmises dans la fonction de rappel callback, signature Comme suit :
function callback() { this; // dom element} Ceci dans la fonction de rappel est l'objet DOM qui exécute cette fonction. Il sera exécuté à la fin de l'animation.
2. Utilisez la fonction bascule
La fonction bascule est une fonction plus puissante qui peut changer l'état visible d'un élément. rencontrer le besoin La situation de l'utilisation de la bascule. Par exemple, vous souhaitez qu'un morceau de texte affiche le calque contextuel lorsque vous cliquez dessus pour la première fois et masque le calque contextuel lorsque vous cliquez dessus pour la deuxième fois. .
Remarque : La méthode toggle() est déclarée obsolète dans jQuery1.8. Supprimée dans la version .9 ; Celui qui est appelé dépend des réglages des paramètres transmis.
Nous pouvons obtenir cet effet en modifiant légèrement l'exemple d'ouverture :
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() { //动画速度
var speed = 500; //绑定事件处理
$("#btnShow").click(function(event) { //取消事件冒泡
event.stopPropagation(); //设置弹出层位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //切换弹出层的显示状态
$("#divPop").toggle(speed);
}); //单击空白区域隐藏弹出层
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //单击弹出层则自身隐藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</button>
</div>
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
<div style="text-align: center;">pop div</div>
</div>
</body>
</html>section suivante