Teilen Sie einige häufig verwendete jQuery-Animationsereignisse und Animationsfunktionen_jquery

Einige häufig verwendete jQuery-Animationsfunktionen wurden aussortiert und sind beim Erstellen interaktiver Seiten sehr nützlich

.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);

Dann habe ich einige CSS-Eigenschaften herausgesucht, die die Animationsfunktion bedienen kann, die tatsächlich an anderen Stellen im Internet gefunden wurden (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

Schriftartgröße (wird im CSS-Parameter der Animationsfunktion angegeben und unterscheidet sich von der Standard-CSS-Eigenschaft. Dieser CSS-Standard lautet beispielsweise: Schriftgröße. Auf die gleiche Weise
Dies ist auch bei vielen Gesichtern der Fall)

 bottom
 left
 right
 top
 letterSpacing
 wordSpacing
 lineHeight
 textIndent
 opacity

jQuery-Animationsfunktion

jQuery-Animationsfunktionen sind in drei Kategorien unterteilt:

1. Grundlegende Animationsfunktion: sowohl transparenter Farbverlauf als auch Gleiteffekt, häufig verwendete Animationseffekte.
2. Gleitanimationsfunktion: Nur Gleiteffekt verwenden.
3. Fade-Animationsfunktion: Verwenden Sie nur den Fade-Effekt.

1. Grundlegende Animationsfunktion:

1. show()

Versteckte passende Elemente anzeigen. Dies ist die nicht animierte Version von „show(speed, [callback])“. Wenn das ausgewählte Element sichtbar ist, ändert diese Methode nichts. Diese Methode funktioniert unabhängig davon, ob das Element über die Methode hide() ausgeblendet ist oder display:none; in CSS festgelegt ist.
Beispiel: Alle Absätze anzeigen, $("p").show()

2. show(speed,[callback])

Zeigen Sie passende Elemente mit eleganter Animation an und geben Sie optional eine Rückruffunktion zurück, nachdem die Anzeige abgeschlossen ist. Höhe, Breite und Deckkraft jedes übereinstimmenden Elements können basierend auf einer angegebenen Geschwindigkeit dynamisch geändert werden.
Beispiel: Verwenden Sie eine langsame Animation, um versteckte Absätze anzuzeigen, die 600 Millisekunden dauert, $("p").show(600)

3. hide()

Anzeigeelemente ausblenden. Dies ist die nicht animierte Version von „hide( speed, [callback] )“. Wenn das ausgewählte Element ausgeblendet ist, ändert diese Methode nichts.
Zum Beispiel: alle Absätze ausblenden, $("p").hide()

4. verstecken(Geschwindigkeit,[Rückruf])

Verstecken Sie alle passenden Elemente mit eleganter Animation und lösen Sie optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist. Sie können die Höhe, Breite und Deckkraft jedes übereinstimmenden Elements basierend auf einer angegebenen Geschwindigkeit dynamisch ändern. In jQuery1.3 werden auch Auffüllung und Rand animiert und der Effekt wird glatter.
Beispiel: Verwenden Sie 600 ms, um den Absatz $("p").hide("slow");
langsam auszublenden

5. umschalten

Schaltet den sichtbaren Zustand eines Elements um. Wenn das Element sichtbar ist, schalten Sie es auf „Ausgeblendet“ um. Wenn das Element ausgeblendet ist, schalten Sie es auf „Sichtbar“ um.
Beispiel: Schalten Sie den sichtbaren Status aller Absätze um, $("p").toggle()

6. Umschalten (Schalter)

Der sichtbare Zustand des Schnittblumenelements basiert auf dem Schalterparameter (wahr ist sichtbar, falsch ist ausgeblendet). Wenn der Schalter auf „true“ gesetzt ist, wird die Methode show() aufgerufen, um das passende Element anzuzeigen. Wenn der Schalter auf „false“ gesetzt ist, wird hide() aufgerufen, um das Element auszublenden.
Zum Beispiel: Schalten Sie den sichtbaren Status aller Absätze um, varflip=0;$("button").click(function(){$("p").toggle(flip %2==0);});

7. Umschalten (Geschwindigkeit,[Rückruf])

Schalten Sie alle passenden Elemente mit eleganter Animation um und lösen Sie optional eine Rückruffunktion aus, nachdem die Anzeige abgeschlossen ist. Ändert dynamisch die Höhe, Breite und Deckkraft jedes passenden Elements entsprechend einer angegebenen Geschwindigkeit. jquery1.3, Polsterung und Rand verfügen ebenfalls über Animationen und der Effekt wird flüssiger.

Zum Beispiel: Verwenden Sie 200 ms, um den Anzeigestatus des Absatzes schnell zu ändern, und öffnen Sie dann ein Dialogfeld, $("p").toggle("fast",function(){alert("hello!") ;});

2. Gleitende Animationsfunktion

1. slideDown(speed,[callback])

Zeigen Sie alle übereinstimmenden Elemente dynamisch durch Höhenänderungen an (Erhöhung nach unten) und senden Sie nach Abschluss der Anzeige eine Rückruffunktion an eine optionale Stelle. Dieser Animationseffekt passt nur die Höhe des Elements an und kann dazu führen, dass die passenden Elemente „gleitend“ angezeigt werden. In jQuery 1.3 werden auch der obere und untere Abstand sowie der Rand animiert und der Effekt wird glatter.
Beispiel: Verwenden Sie 600 ms, um den Absatz langsam nach unten zu schieben, $("p").slideDown("slow");

2. slideUp(speed,[callback])

Verstecken Sie alle passenden Elemente dynamisch, indem Sie die Höhe ändern (nach oben abnehmen) und optional eine Rückruffunktion auslösen, nachdem das Ausblenden abgeschlossen ist.
Beispiel: Schieben Sie den Absatz langsam in 600 ms nach oben, $("p").slideUp("slow");

3. slideToggle(speed,[callback])

Schalten Sie die Sichtbarkeit aller passenden Elemente durch Höhenänderungen um und lösen Sie optional eine Rückruffunktion aus, nachdem der Wechsel abgeschlossen ist.
Beispiel: Schieben Sie den Absatz langsam in 600 ms nach oben oder unten, $("p").slideToggle("slow");

3. Fading-Funktion Fading

1. fadeIn(speed,[callback])

Erzielen Sie den Einblendeffekt aller passenden Elemente durch Änderungen der Transparenz und rufen Sie optional eine Rückruffunktion auf, nachdem die Animation abgeschlossen ist. Diese Animation passt nur die Deckkraft des Elements an, was bedeutet, dass sich die Höhe und Breite aller passenden Elemente nicht ändert.
Beispiel: Verwenden Sie 600 ms, um den Absatz langsam einzublenden, $("p").fadeIn("slow");

2. fadeOut(speed,[callback])

Erzielen Sie den Ausblendeffekt aller passenden Elemente durch Änderungen der Deckkraft und lösen Sie optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist.
Beispiel: Verwenden Sie 600 ms, um den Absatz langsam auszublenden, $("p").fadeOut("slow");

3. fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的出发一个回调函数。
例如：用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; 
}); 
});