Mehrere in jQuery integrierte Animationsstile

Bei der Verwendung von JavaScript zur Implementierung von Animationen ist das Prinzip sehr einfach: Wir müssen den CSS-Stil des DOM-Elements jedes Mal nur in einem festen Zeitintervall (z. B. 0,1 Sekunden) ein wenig ändern (z. B. die Höhe erhöhen). und Breite um 10 % erhöht, und es sieht aus wie eine Animation.

Aber um Animationseffekte mithilfe von JavaScript manuell zu implementieren, muss sehr komplexer Code geschrieben werden. Wenn Sie Animationseffekte mit Funktionen zur einfachen Wiederverwendung kapseln möchten, müssen Sie weitere Dinge berücksichtigen. In diesem Artikel werden hauptsächlich verschiedene in jQuery integrierte Animationsstile vorgestellt.

Mit jQuery zum Implementieren von Animationen könnte der Code nicht einfacher sein: Es ist nur eine Codezeile erforderlich!

Werfen wir zunächst einen Blick auf mehrere in jQuery integrierte Animationsstile:

Anzeigen / Ausblenden

Rufen Sie show() und hide( direkt ohne Parameter auf) , zeigt DOM-Elemente an und verbirgt sie. Solange jedoch ein Zeitparameter übergeben wird, wird daraus eine Animation:

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

Die Zeit wird in Millisekunden angegeben, es können aber auch Zeichenfolgen wie „langsam“ und „schnell“ sein:

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

Die toggle()-Methode bestimmt, ob show() oder hide() basierend auf dem aktuellen Status angezeigt wird.

slideUp / slideDown

Sie haben vielleicht gesehen, dass sich show() und hide() von der oberen linken Ecke aus allmählich erweitern oder verkleinern, während sich slideUp() und slideDown() allmählich erweitern oder verkleinern die vertikale Richtung.

slideUp() schließt ein sichtbares DOM-Element, der Effekt ist wie das Schließen eines Vorhangs, slideDown() macht das Gegenteil und slideToggle() bestimmt die nächste Aktion basierend darauf, ob das Element sichtbar ist:

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

Der Animationseffekt von fadeIn() und fadeOut() besteht darin, ein- und auszublenden, was durch kontinuierliches Setzen des Opazitätsattributs des DOM-Elements erreicht wird, während fadeToggle() basiert darauf, ob das Element sichtbar ist. So entscheiden Sie über die nächste Aktion:

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

Benutzerdefinierte Animation

Wenn der oben genannte Animationseffekt Ihre Anforderungen nicht erfüllen kann, verwenden Sie den letzten Ausweg: animate() , es kann erreicht werden Für jeden Animationseffekt müssen wir den endgültigen CSS-Status und die Zeit des DOM-Elements übergeben. jQuery passt das CSS innerhalb des Zeitraums kontinuierlich an, bis es den von uns festgelegten Wert erreicht:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate() ist OK. Übergeben Sie eine Funktion, die aufgerufen wird, wenn die Animation endet:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

Tatsächlich ist dieser Callback-Funktionsparameter auch auf einfache Animationen anwendbar.

Mit animate() können Sie verschiedene benutzerdefinierte Animationseffekte erzielen:

animate()

Serielle Animation

jQuery-Animationseffekte können auch seriell ausgeführt werden und durch die Methode „delay()“ angehalten. Auf diese Weise können wir komplexere Animationseffekte erzielen, aber der Code ist recht einfach:

var p = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
p.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

Da die Animation für einen bestimmten Zeitraum ausgeführt werden muss, Daher muss jQuery kontinuierlich neue Promise-Objekte zurückgeben, um nachfolgende Vorgänge auszuführen. Es reicht nicht aus, Animationen einfach in Funktionen zu kapseln.

Warum manche Animationen keine Wirkung haben

Es kann sein, dass einige Animationen wie slideUp() überhaupt keine Wirkung haben. Dies liegt daran, dass das Prinzip der jQuery-Animation darin besteht, den CSS-Wert schrittweise zu ändern, z. B. die Höhe schrittweise von 100 Pixel auf 0 zu ändern. Aber für viele DOM-Elemente, die keine Blockelemente sind, hat das Festlegen der Höhe überhaupt keine Auswirkung, sodass die Animation keine Auswirkung hat.

Darüber hinaus implementiert jQuery den Animationseffekt von Hintergrundfarbe nicht und das Festlegen von Hintergrundfarbe mit animate() hat keine Auswirkung. In diesem Fall können Sie den CSS3-Übergang verwenden, um Animationseffekte zu erzielen.

Verwandte Empfehlungen:

Verwenden Sie Canvas, um ein Beispiel für eine Kurvenanimation zu zeichnen

JS und CSS, um die gemeinsame Nutzung von Animationseffekten im Web zu erreichen Seite wird geladen

Zwei Methoden von jQuery teilen, um den Animationseffekt einer Bildschiebetür zu realisieren

Das obige ist der detaillierte Inhalt vonMehrere in jQuery integrierte Animationsstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!