Eine Anleitung zum Schreiben von Animationseffekten in der jQuery-Bibliothek_Basics von JavaScript

Die in JQuery am häufigsten verwendeten Animationsmethoden sind hide() und show().

$(element).hide() Dieser Code kann diesem element.css("display","none")

entsprechen

Füllen Sie die Ereignisse in hide(time) und show(time) aus, und sie können langsam verschwinden und erscheinen. Sie können mehrere Stile, Höhe, Breite und Deckkraft von Elementen ändern.

Ein weiterer Satz von Methoden fadeIn() und fadeOut() unterscheidet sich von hide und show dadurch, dass bei Verwendung von hide oder show die Höhe der Webseite geändert wird, fadeIn und fadeOut jedoch nicht.

$("#panel h5.head").toggle(function(){                                                                                     $ (this).removeClass("highlight");                                                                                                                                                                                                                                          .

Zusammenfassung der Animationsmethoden

Animationswarteschlange

(1) Animationseffekte auf eine Reihe von Elementen.

a) Beim Anwenden mehrerer Eigenschaften in einer animate()-Methode werden Animationen gleichzeitig ausgeführt.

b) Wenn die Animationsmethode verkettet angewendet wird, erfolgt die Animation nacheinander.

(2) Animationseffekte auf mehrere Elementgruppen

a) Standardmäßig werden alle Animationen gleichzeitig ausgeführt.

b) Wenn die Animationsmethode in Form von Rückrufen angewendet wird, erfolgt die Animation in der Reihenfolge der Rückrufe.

Beachten Sie außerdem, dass bei der Animationsmethode andere Nicht-Animationsmethoden in die Warteschlange springen, z. B. die css()-Methode. Damit diese Nicht-Animationsmethoden ebenfalls der Reihe nach ausgeführt werden, müssen diese Methoden in geschrieben werden Rückruffunktion der Animationsmethode.

Geben Sie ein Beispiel für animieren:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

Wenn Sie möchten, dass die Animation stoppt, müssen Sie die stop()-Methode

vor der animate()-Methode einfügen

Zum Beispiel: $("#id").stop().animate() Achten Sie auf die beiden Parameter in stop.

Methode zur Bestimmung, ob sich ein Element im animierten Zustand befindet:

$(element).is(“:animated”);

jQuery kann problemlos einige dynamische Effekte zu Elementen auf der Seite hinzufügen. Sie können die integrierten Effekte verwenden oder Ihre eigenen Effekte definieren.

Hier sind einige integrierte Effektmethoden:

• $.fn.show Ausgewähltes Element anzeigen
• $.fn.hide Ausgewähltes Element ausblenden
• $.fn.fadeIn Einblenden
• $.fn.fadeOut fadeout
• $.fn.slideDown zeigt Elemente durch vertikalen Gleiteffekt an
• $.fn.slideUp verbirgt Elemente durch den vertikalen China-Effekt
• $.fn.slideToggle Schiebeinteraktionsausführung ein- oder ausblenden

Ein einfaches Beispiel:

$('h1').show();

Legen Sie die Dauer des Animationseffekts fest

Für $.fn.show und $.fn.hide ist die Standarddauer 0. Die Standarddauer für andere Effekte beträgt im Allgemeinen 400 Millisekunden. Natürlich können Sie die Dauer auch selbst festlegen:

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

Die Standardgeschwindigkeitskonstanten von jQuery befinden sich im jQuery.fx.speeds-Objekt:

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

Wir können dieses Objekt auch erweitern und unsere eigenen häufig verwendeten Geschwindigkeitswerte hinzufügen:

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

Rückruffunktion

Wenn Sie Code ausführen möchten, nachdem der Animationseffekt endet, können Sie diese Animationsmethoden durch eine Rückruffunktion ersetzen:

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

Wenn im Selektor kein Element übereinstimmt, wird die Rückruffunktion nicht ausgeführt. Daher ist vor der Ausführung der Rückruffunktion eine Beurteilung erforderlich:

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

Benutzerdefinierte Animationsmethode

Die $.fn.animate-Methode in jQuery kann zum Erweitern unserer benutzerdefinierten Animation verwendet werden. Dies wird hauptsächlich durch Festlegen der CSS-Eigenschaften von Elementen über die animate-Methode erreicht. Beim Festlegen der CSS-Eigenschaften von Elementen können Sie absolute Werte verwenden ​​oder relative Werte:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

Wenn Sie jedoch $.fn.animate verwenden, um einen benutzerdefinierten Animationseffekt zu erstellen, kann die Farbe des Elements nicht geändert werden. Wenn Sie Farbanimationen erstellen möchten, müssen Sie auf einige andere Farb-Plug-Ins zurückgreifen.
Animationsstil

jQuery verfügt über zwei integrierte Animationsstile: Swing und Linear

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

Animation steuern

jQuery bietet mehrere Methoden zur Steuerung der Animationsausführung:

$.fn.stop stoppt die aktuell ausgeführte Animation

$.fn.delay hält die Animation für einen bestimmten Zeitraum an:

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off: Deaktivieren Sie den Übergangseffekt der Animation. Dies entspricht dem Festlegen der Dauer auf 0.