Zusammenfassung der jQuery-Animationsverarbeitung

Ich arbeite seit mehr als einem Jahr an Frontend-Sachen. Da mein Chef einige junge und dynamische Effekte verfolgt, damit Seitenelemente nicht einfach ausgeblendet und angezeigt werden können, verwende ich häufig einige Animationseffekte. Ich habe festgestellt, dass die jQuery-Animation wirklich einfach zu verwenden ist. Ich hoffe, ich muss nicht jedes Mal die API lesen:

queue()/dequeue()

Diese beiden Methoden ähneln XMLHttpRequest von Ajax. Das Objekt ist ebenfalls verborgen und für normale Menschen unbekannt. Diese beiden Methoden sind bei der Animationsverarbeitung sehr nützlich.

$('#test').animate({            "width": "300px",            "height": "300px",            "opacity":"1"
        });

Auf diese Weise werden Höhe, Breite und Deckkraft des Test-P Ja, manchmal möchten wir es nicht synchron ausführen, sondern die Änderung der Form und die Änderung der Transparenz. Zuerst wird es zu einem p von 300 * 300, und dann ändert sich die Transparenz allmählich so

$('#test').animate({            "width": "300px",            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

Die Schüler können sich vorstellen, wie der Code aussehen würde, wenn es zehn Animationsprozesse gäbe queue() und dequeue() können solche Probleme lösen und einen erstellen queue für alle Prozessmethoden. Die Funktion wird nacheinander aufgerufen. Sehen Sie sich zunächst die Syntax an

queue( [queueName], newQueue) Die Operation besteht darin, die Warteschlangenmethode

Der erste Parameter ist der Warteschlangenname. Wenn er nicht geschrieben wird, ist der Standardwert fx

Der zweite Parameter kann ein Funktionsarray zum Speichern aller Warteschlangenfunktionen oder eine Rückruffunktion sein Wird verwendet, um der Warteschlange neue Funktionen hinzuzufügen

dequeue( [queueName ] )Führen Sie die nächste Funktion in der Warteschlange für das passende Element aus

Jedes Mal, wenn Sie diese Methode aufrufen, Führen Sie die nächste Funktion in der Warteschlange aus

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

Der obige Code kann dazu führen, dass test p zuerst auf 200*200 und dann auf 400*400 geändert wird. Jede Animation wird ausgeführt die Callback-Funktion und ruft die nächste Methode in der Warteschlange auf. Wenn Sie während des Ausführungszeitraums eine Funktion hinzufügen möchten, können Sie dies tun

var q = [            function () {
                $(this).animate({                    "width": "200px",                    "height":"200px"
                }, next)
            },            function () {
                $(this).animate({                    "width": "400px",                    "height": "400px"
                }, next);
            }
        ];        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

Kurz gesagt, diese beiden Methoden sollen die Ausführung von Animationen in einer vorgegebenen Reihenfolge erleichtern

clearQueue() /stop()

Diese beiden Methoden werden hauptsächlich zum Abbrechen der Animation verwendet

clearQueue( [queueName ] ) Löscht die Funktionen in der Warteschlange

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) ist Wird verwendet, um die laufende Animation zu stoppen

Warteschlange: Der Name der laufenden Animationswarteschlange

clearQueue: Der Standardwert ist false, ob die Warteschlange selbst gelöscht werden soll

jumpToEnd: Die Der Standardwert ist false, ob die Animation sofort beendet werden soll

Wenn Sie die Animation gerade jetzt stoppen möchten, können Sie so schreiben

$('#test').clearQueue('myQueue');

Wenn Sie so schreiben, wird die Animation nicht beendet, aber nachdem die aktuelle Animation ausgeführt wurde, wird die nächste Animation in der Warteschlange nicht aufgerufen (die Warteschlange wurde geleert, es gibt keine nächste), wenn Sie die Animation sofort stoppen möchten , Sie können so schreiben

$('#test').stop();

Ob die Animation angehalten oder sofort ausgeführt wird, müssen Sie die Parameter von stop()

slideDown()/slideUp()/slideToggle()

Der Folieneffekt wird häufig bei Animationen verwendet, insbesondere bei Menüs. Diese drei Funktionen sind sehr einfach, dh die Elemente werden reduziert/erweitert / Automatisch bestimmt die Faltung und Dehnung, aber ihre Parameter sind nicht nur die Dauer, wir können auch einige andere Steuerelemente hinzufügen. Schauen Sie sich die Einführung in der API an. Dieser Sanger

Funktionsparameter

ist ähnlich und das slideUp-Beispiel

slideUp( [duration ] [, easing ] [, complete ] )

easing ist eine Verlaufsmethode. Ich habe dies nie manuell geändert. Wenn die Dauer nicht angegeben ist, dauert es etwa eine Sekunde Vervollständigen Sie die Animation standardmäßig.

slideUp(optionen)

Häufig verwendete Konfigurationen in Optionen sind

Dauer: Animationszeit

Warteschlange: siehe oben. Natürlich werden Sie es verstehen.

Schritt: Wird jedes Mal ausgeführt, wenn sich das

-Attribut

während der Animation ändert. Abgeschlossen: Wird ausgeführt, wenn die Animation abgeschlossen ist

Start: wird ausgeführt, wenn die Animation beginnt

immer: Tritt auf, wenn die Animation beendet wird oder ein Unfall auftritt und die Ausführung nicht abgeschlossen ist

Diese drei Funktionen werden geändert die Höhe des Elements bei der Ausführung. Danach wird die Höhe wiederhergestellt und der Dialog auf „none“ gesetzt

fadeIn()/ fadeOut()/ fadeToggle()/ fade fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() Die Verwendung ähnelt der der Folienserie und wird nicht einzeln erläutert. Diese drei Funktionen ändern jedoch die Transparenz des Elements . Nachdem die Funktion fadeOut() ausgeführt wurde, stellt sie die Deckkraft des Elements wieder her und ändert das Attribut

display

auf none

fadeTo( duration, opacity [, easing ] [, komplett ] )

Die Methode fadeTo() ist nicht so kompliziert, aber die Dauer und Deckkraft von fadeTO() werden nicht weggelassen. Ja, Sie müssen schreiben

show()/ hide()/ toggle()

这三个函数的用法和slide系列一样，但是在效果上有几点儿不同

1.如果参数duration不写，那么回立即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不能够实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

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

大部分属性都不用解释，properties是个json，属性的值可以是字面量、function、”toggle”、简单表达式，如果是function会把返回值赋给属性，熟悉jQuery的同学肯定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，能够使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，比如可以这么些 “width”:”+=10px”。

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

如果传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法一样，常用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是不是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<p>Animation complete.</p>" );
    }
  });

hover()

严格说这个并不是个动画函数，但是由于低版本IE的hover对很多元素都不起作用，用CSS无法完成很多动作，所以经常需要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单，不多介绍了，这样就能把mousein 和mouseout写在一起了。

Das obige ist der detaillierte Inhalt vonZusammenfassung der jQuery-Animationsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!