JQuery-Animations- und Spezialeffektbeispielanalysis_jquery

In diesem Artikel wird die Verwendung von JQuery-Animationen und Spezialeffekten anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Anzeigen und Ausblenden

show(spped,[callback]) und hide(spped,[callback])
Die Geschwindigkeit kann langsam, normal und schnell eingegeben werden, und die entsprechenden Geschwindigkeiten betragen 600 ms, 400 ms bzw. 200 ms. Sie können die Millisekunden auch direkt eingeben. Die Rückruffunktion ist eine Rückruffunktion. Diese Funktion wird aufgerufen, nachdem die Aktion abgeschlossen ist

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

toggle()-Funktion, formatloses Format, schaltet zwischen Anzeigen und Ausblenden um

toggle(true orfalse) hat eine boolesche Wertform. Wenn es wahr ist, wird das Element angezeigt, andernfalls wird das Element ausgeblendet
Die Verwendung von toggle(speed,[callback]) ähnelt der Funktion show()

Wischen

slideDown(spped,[callback]) und slideUp(spped,[callback])

Im Wesentlichen die Höhe des Elements ändern
slideToglge(sped,[callback]) schaltet den Folieneffekt um

Ein- und Ausblenden

fadeIn(spped,[callback]) und fadeOut(spped,[callback])

Im Wesentlichen die Transparenz eines Elements ändern
fadeTo(spped,opacity,[callback]); Deckkraft ist Transparenz, zwischen 0 und 1, 1 ist vollständig transparent

Benutzerdefinierte Animation

animate(params,[duration],[easing],[callback])

params stellt den Attributstil und die Wertesammlung dar, die zum Erstellen von Animationseffekten verwendet werden
Die Dauer stellt drei Standardgeschwindigkeitszeichen dar: langsam, normal, schnell oder eine benutzerdefinierte Anzahl von Millisekunden
Easing wird von Animations-Plug-Ins verwendet, um die Leistung von Animationen zu steuern. Es verfügt normalerweise über lineare und Swing-Charakterwerte
Rückruf ist die Rückruffunktion, die nach Abschluss der Animation ausgeführt wird

$(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 ist ein boolescher Wert, der angibt, ob die Ausführung der Animation gestoppt werden soll
gotoEnd ist ein boolescher Wert, der angibt, ob die ausgeführte Animation sofort abgeschlossen werden soll
Verzögerung(Dauer,[Warteschlangenname])
Dauer ist der verzögerte Zeitwert
queueName stellt das Warteschlangensubstantiv dar, also die Animationswarteschlange

$("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); 
}); //延时切换图片

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.