Exemple d'animation et d'effets spéciaux JQuery Analysis_jquery

Cet article analyse l'utilisation de l'animation et des effets spéciaux JQuery avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Afficher et masquer

afficher(spped,[callback]) et masquer(spped,[callback])
La vitesse peut être remplie lente, normale et rapide, et les vitesses correspondantes sont respectivement de 600 ms, 400 ms et 200 ms. Vous pouvez également renseigner directement les millisecondes. La fonction de rappel est une fonction de rappel. Cette fonction est appelée une fois l'action terminée

.

$("img").show(3000,function(){ 
   $(this).css("border","solid 1px #ccc”); 
});

Fonction toggle(), format sans paramètre, bascule entre afficher et masquer
toggle(true orfalse) a une forme de valeur booléenne Lorsqu'il est vrai, l'élément est affiché, sinon, l'élément est masqué
. L'utilisation de toggle(speed,[callback]) est similaire à la fonction show()

Faites glisser

slideDown(spped,[callback]) et slideUp(spped,[callback])
Changer essentiellement la hauteur de l'élément
slideToglge(sped,[callback]) change l'effet de glissement

Fondu entrant et sortant

fadeIn(spped,[callback]) et fadeOut(spped,[callback])
Changer essentiellement la transparence d'un élément
fadeTo(spped,opacity,[callback]); l'opacité est la transparence, entre 0 et 1, 1 est entièrement transparent

Animation personnalisée

animer(params,[duration],[easing],[callback])
params représente le style d'attribut et la collection de valeurs utilisés pour créer des effets d'animation
la durée représente trois caractères de vitesse par défaut, lent, normal, rapide ou un nombre personnalisé de millisecondes
L'assouplissement est utilisé par les plug-ins d'animation pour contrôler les performances des animations. Il a généralement des valeurs de caractères linéaires et swing
. callback est la fonction de rappel exécutée une fois l'animation terminée

$(this).animate( 
   {   width:"20%", 
       height:"70px"    
    }, //对象表示法，JQuery中常用这种格式传递参数 
   3000, 
   function(){ 
   $(this).css("border":"solid 3px #666") 
   .html("变大了！！"); 
   } 
);//传递参数时，必须用骆驼法来写属性名称，如font-size必须写成fontSize

$("p").animate( 
   { left:"20px", 
    top:"70px"  
   }, 
   3000 
) //向右移动20像素，向下移动70像素

stop([clearQueue],[gotoEnd])
clearQueue est une valeur booléenne indiquant s'il faut arrêter l'animation en cours d'exécution
gotoEnd est une valeur booléenne indiquant s'il faut terminer l'animation en cours d'exécution immédiatement
délai(durée,[queueName])
la durée est la valeur du temps retardé
queueName représente le nom de la file d'attente, c'est-à-dire la file d'attente d'animation

$("a :eq(0)").click(function(){ 
   $("img").slideToggle(3000); 
}); //“拉窗帘”方式切换图片 
$("a:eq(1)").click(function(){ 
   $("img").stop(); 
}); //停止正在执行的动画 
$("a:eq(2)").click(function(){ 
   $("img").delay(2000) 
   .slideToggle(3000); 
}); //延时切换图片

J'espère que cet article sera utile à la programmation jQuery de chacun.