So kapseln Sie animate.css-Code mit jQuery

Dieses Mal zeige ich Ihnen, wie Sie jQuery zum Kapseln des animate.css-Codes verwenden und welche Vorsichtsmaßnahmen für die Verwendung von jQuery zum Kapseln des animate.css-Codes gelten Das Folgende ist ein praktischer Fall. Lassen Sie uns gemeinsam einen Blick darauf werfen.

animate.css ist eine unterhaltsame, browserübergreifende CSS3-Animationsbibliothek.

1. Führen Sie zunächst die animierte CSS-Datei ein

<link rel="stylesheet" href="animate.css" rel="external nofollow" >

2 Element Animationsstilname

<p id="box" class="animated bounce"></p>

Dies umfasst zwei Klassennamen. Der erste ist der grundlegende Stilname, der hinzugefügt werden muss. Der zweite ist der angegebene Name des Animationsstils.

3. Wenn Sie einem Element dynamisch einen Animationsstil hinzufügen möchten, können Sie dies über jquery tun

Geben Sie die Animation an ObjektFügen Sie eine Klasse hinzu und warten Sie dann auf das Ereignis „Animation Ende“ . Sobald Sie hören, dass die Animation endet, entfernen Sie sofort die zuvor hinzugefügte Klasse.

Das offizielle Paket von jQuery wird bereitgestellt:

//扩展$对象，添加方法animateCss
 $.fn.extend({
 animateCss: function (animationName) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $(this).addClass('animated ' + animationName).one(animationEnd, function() {
  $(this).removeClass('animated ' + animationName);
  });
 }
});
//调用示例：
$('#box').animateCss('bounce');

Andere verwandte Artikel!

Übermittlung der JQuery-Formularvalidierung

jQuery-Kontrollkästchen auswählen und Wert abrufen

So implementieren Sie Jquery Ajax asynchron domänenübergreifend

Das obige ist der detaillierte Inhalt vonSo kapseln Sie animate.css-Code mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!