Partagez certains événements d'animation jQuery et fonctions d'animation couramment utilisés_jquery

Certaines fonctions d'animation jQuery couramment utilisées ont été triées et sont très utiles lors de la création de pages interactives

.css('a','12px');
.css({
 a:'12px',
 b:'#fff'
});
.show();
.hide();
.toggle();
.fadeIn();
.fadeOut();
.fadeToggle();
.slideDown();
.slideUp();
.slideToggle();
.text('string');
.animate({
 a:'40px',
 b:'ccc'
},200)
.fadeTo(600,0.4);

Ensuite, j'ai trié certaines propriétés CSS que la fonction d'animation peut exploiter, qui ont en fait été trouvées ailleurs sur Internet (http://www.jb51.net/article/75510.htm) :

backgroundPosition
 borderWidth
 borderBottomWidth
 borderLeftWidth
 borderRightWidth
 borderTopWidth
 borderSpacing
 margin
 marginBottom
 marginLeft
 marginRight
 marginTop
 outlineWidth
 padding
 paddingBottom
 paddingLeft
 paddingRight
 paddingTop
 height
 width
 maxHeight
 maxWidth
 minHeight
 maxWidth
 font

fontSize (spécifié dans le paramètre css de la fonction animate et est différent de la propriété css standard, par exemple, ce standard css est : font-size. De la même manière
C'est aussi le cas de nombreux visages)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

Fonction d'animation jQuery

Les fonctions d'animation jQuery sont divisées en trois catégories :

1. Fonction d'animation de base : à la fois dégradé transparent et effet de glissement, effets d'animation couramment utilisés.
2. Fonction d'animation coulissante : utilisez uniquement l'effet coulissant.
3. Fonction d'animation de fondu : utilisez uniquement l'effet de fondu.

1. Fonction d'animation de base :

1. montrer()

Afficher les éléments correspondants cachés. Il s'agit de la version non animée de 'show(speed, [callback])'. Si l'élément sélectionné est visible, cette méthode ne changera rien. Cette méthode fonctionnera que l'élément soit masqué via la méthode hide() ou que display:none soit défini en CSS.
Par exemple : afficher tous les paragraphes, $("p").show()

2. afficher(vitesse,[rappel])

Affichez les éléments correspondants avec une animation élégante et renvoyez éventuellement une fonction de rappel une fois l'affichage terminé. La hauteur, la largeur et l'opacité de chaque élément correspondant peuvent être modifiées dynamiquement en fonction d'une vitesse spécifiée.
Par exemple : utilisez une animation lente pour afficher les paragraphes masqués, d'une durée de 600 millisecondes, $("p").show(600)

3. cacher()

Masquer les éléments d'affichage. Il s'agit de la version non animée de 'hide( speed, [callback] )'. Si l'élément sélectionné est masqué, cette méthode ne changera rien.
Par exemple : masquer tous les paragraphes, $("p").hide()

4. cacher(vitesse,[rappel])

Masquez tous les éléments correspondants avec une animation élégante et déclenchez éventuellement une fonction de rappel une fois l'affichage terminé. Vous pouvez modifier dynamiquement la hauteur, la largeur et l'opacité de chaque élément correspondant en fonction d'une vitesse spécifiée. Dans jQuery1.3, le remplissage et la marge seront également animés et l'effet sera plus fluide.
Par exemple : utilisez 600 ms pour masquer lentement le paragraphe, $("p").hide("slow");

5. basculer

Basculer l'état visible d'un élément. Si l'élément est visible, passez-le en masqué ; si l'élément est masqué, passez-le en visible.
Par exemple : basculez l'état visible de tous les paragraphes, $("p").toggle()

6. basculer(interrupteur)

L'état visible de l'élément fleur coupée est basé sur le paramètre switch (true est visible, false est caché). Si switch est défini sur true, la méthode show() est appelée pour afficher l'élément correspondant. Si switch est défini sur false, hide() est appelée pour masquer l'élément.
Par exemple : changez l'état visible de tous les paragraphes, varflip=0;$("button").click(function(){$("p").toggle(flip %2==0);});

7. bascule(vitesse,[rappel])

Basculez tous les éléments correspondants avec une animation élégante et déclenchez éventuellement une fonction de rappel une fois l'affichage terminé. Modifie dynamiquement la hauteur, la largeur et l'opacité de chaque élément correspondant en fonction d'une vitesse spécifiée. jquery1.3, le remplissage et la marge auront également des animations et l'effet sera plus fluide.

Par exemple : utilisez 200 ms pour changer rapidement l'état d'affichage du paragraphe, puis affichez une boîte de dialogue, $("p").toggle("fast",function(){alert("hello!") ;});

2. Fonction d'animation coulissante coulissante

1. slideDown(vitesse,[rappel])

Affichez dynamiquement tous les éléments correspondants via des changements de hauteur (augmentation vers le bas) et envoyez une fonction de rappel à un emplacement facultatif une fois l'affichage terminé. Cet effet d'animation ajuste uniquement la hauteur de l'élément, et peut provoquer l'affichage des éléments correspondants de manière "coulissante". Dans jQuery 1.3, le remplissage et la marge supérieur et inférieur seront également animés et l'effet sera plus fluide.
Par exemple : utilisez 600 ms pour faire glisser lentement le paragraphe vers le bas, $("p").slideDown("slow");

2. slideUp(vitesse,[rappel])

Masquez dynamiquement tous les éléments correspondants en modifiant la hauteur (en diminuant vers le haut) et en déclenchant éventuellement une fonction de rappel une fois le masquage terminé.
Par exemple : faites glisser lentement le paragraphe vers le haut en 600 ms, $("p").slideUp("slow");

3. slideToggle(vitesse,[rappel])

Basculez la visibilité de tous les éléments correspondants lors des changements de hauteur et déclenchez éventuellement une fonction de rappel une fois le changement terminé.
Par exemple : faites glisser lentement le paragraphe vers le haut ou vers le bas en 600 ms, $("p").slideToggle("slow");

3. Fonction de fondu Fondu

1. fadeIn(vitesse,[rappel])

Obtenez l'effet de fondu de tous les éléments correspondants grâce à des changements de transparence et appelez éventuellement une fonction de rappel une fois l'animation terminée. Cette animation ajuste uniquement l'opacité de l'élément, ce qui signifie que la hauteur et la largeur de tous les éléments correspondants ne changeront pas.
Par exemple : utilisez 600 ms pour faire apparaître lentement le paragraphe, $("p").fadeIn("slow");

2. fadeOut(vitesse,[rappel])

Obtenez l'effet de fondu de tous les éléments correspondants grâce à des changements d'opacité et déclenchez éventuellement une fonction de rappel une fois l'animation terminée.
Par exemple : utilisez 600 ms pour faire disparaître lentement le paragraphe, $("p").fadeOut("slow");

3. fadeTo(vitesse, opacité,[rappel])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用600ms缓慢将段落的透明度调整到0.66，大约2/3的可见度，$("p").fadeTo("slow",0.66)

四、自定义动画函数Custom

1、animate(params,[duration],[easing],[callback])用于创建自定义动画的函数。这个函数的关键在于制定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如height、top或opacity)。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。而每个属性的值表示这个样式属性到多少是动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是hide、show、toggle这样的字符串值，则会就该属性调用默认的动画形式。

例如：点击按钮后div元素的几个不同属性一同变化，

$("#go").click(function(){
$("#block").animate({
width:"90%",height:"100%",fontSize:"10em",borderWidth:10
},1000);
});

2、stop([clearQueue],[gotoEnd])

停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行clearQueue(Boolean):如果设置成true，则清空队列。可以立即结束动画。gotoEnd(Boolean):让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

例如：点击Go之后开始动画,点Stop之后会在当前位置停下来:

// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
[javascript] view plaincopy
$(document).ready(function(){ 
$(".box h3").toggle(function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).addClass("arrow"); 
return false; 
},function(){ 
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
$(this).removeClass("arrow"); 
return false; 
}); 
});