Ausführliche Erläuterung des JQuery-Effekts using_jquery

jQuery ist eine ausgezeichnete JS-Entwicklungsbibliotheksklasse, die so gut wie ein Prototyp ist, insbesondere ihre Unterstützung für CSS und XPath, was es für uns bequemer macht, JS zu schreiben! Wenn Sie kein JS-Experte sind und hervorragende JS-Effekte schreiben möchten, kann Ihnen jQuery dabei helfen, Ihr Ziel zu erreichen!

.hide()

Übereinstimmende Elemente ausblenden.

　.hide()

Diese Methode akzeptiert keine Parameter.

　.hide([Dauer][,vollständig])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.hide([duration][,easing][,complete])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
　　Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.
Verwendung:

$('button').click(function(){
　　　　　　$('p').hide(2000)
　　　　});
　　　　$("div").click(function(){
　　　　　　$(this).hide(2000,function(){
　　　　　　$(this).remove()
　　　　　　})
　　　　})　

　.show()

Passende Elemente anzeigen.

　.show()

Diese Methode akzeptiert keine Parameter.
​.show([Dauer][,vollständig])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.show([Dauer][,Easing][,Complete])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
　　Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Verwendung:

　　　$("button").click(function () {
　　　　　　　　$("p").show("slow");
　　　　});

　　　　$("div").first().show("fast", function showNext() {
　　　　　　$(this).next("div").show("fast", showNext);
　　　　});

.toggle()

Passende Elemente ein- oder ausblenden.

　.toggle()

Diese Methode akzeptiert keine Parameter.
​.toggle([Dauer][,vollständig])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.toggle([Dauer][,Erleichterung][,vollständig])
　　Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
　　Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Verwendung:

　　　　$("button").click(function () {
　　　　　　$("p").toggle();
　　　　});
　　　　$("button").click(function () {
　　　　　　$("p").toggle("slow");
　　　　});

.animate()

Führen Sie eine benutzerdefinierte Animation basierend auf einer Reihe von CSS-Eigenschaften aus.

　.animate(properties[,duration][,easing][,complete])
Eigenschaften

　　　Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend dieser Gruppe von Objekten.
Dauer (Standard: 400)

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
　　Lockerung (Standardschwung)

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​​.animate(properties,options)
　　Eigenschaften

Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend dieser Gruppe von Objekten.
　　Optionen

Eine Sammlung von Werten, die Animationsoptionen enthalten.

Verwendung:

$("#go").click(function(){
　　　　　　$("#block").animate({
　　　　　　　　width: "70%",
　　　　　　　　opacity: 0.4,
　　　　　　　　marginLeft: "0.6in",
　　　　　　　　fontSize: "3em",
　　　　　　　　borderWidth: "10px"
　　　　　　　}, 1500 );
　　　　});

　　　　$("#right").click(function(){
　　　　　　$(".block").animate({"left": "+=50px"}, "slow");
　　　　});

Wenden Sie eine Animation auf alle Absätze an, sodass ihre linke Eigenschaft 50 und ihre Transparenz 500 Millisekunden lang 1 (d. h. undurchsichtig, sichtbar) wird.

　　$( "p" ).animate({
　　　　　　left: 50, opacity: 1
　　　　}, 500 );

.delay()

　　设置一个延时来推迟执行队列中后续的项。

　　.delay(duration[,queueName])
　　　　duration

　　　　　　一个整数，指示的毫秒数，用于设定下一个队列推迟执行的时间。
　　　　queueName

　　　　　　一个作为队列名的字符串。

　　效果：

　　　　我们可以在

$("button").click(function() {
　　　　　　　　$("div.first").slideUp(300).delay(800).fadeIn(400);
　　　　　　　　$("div.second").slideUp(300).fadeIn(400);
　　});

$("#stop").click(function(){
　　　　　　$(".block").stop();
　　　　　　}); //当点击这个运算的时候 立即停止动画。

　　$(".btn2").click(function(){
　　　　　　　　$("p").fadeIn();
　　　　});

　　　　$(".btn2").click(function(){
　　　　　　　　$("p").fadeOut();
　　　　});

　　　　　$('input').click(function(){
　　　　　　　　　　$('#div1').fadeTo("slow",0.2,function(){
　　　　　　　　　　　　　　$('#div1').css("display","none");
　　　　　　　　　　})
　　　　　　})

　　　　　　$("input").click(function(){
　　　　　　　　$('#div1').fadeToggle(2000)
　　　　})

　$("input").click(function(){
　　　　　　　　　　$('#div1').slideDown(2000)
　　　　　　})

　　　　$("input").click(function(){
　　　　　　$('#div1').slideUp(2000)
　　})

　　$("input").click(function(){
　　　　　　$('#div1').slideToggle(2000)
　　　　})