So kapseln Sie animate.css-Code mit jQuery

Dieses Mal zeige ich Ihnen, wie SiejQueryzum Kapseln des animate.css-Codes verwenden und welcheVorsichtsmaßnahmenfü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.cssist eine unterhaltsame, browserübergreifendeCSS3-Animationsbibliothek.

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

2 Element Animationsstilname

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 anObjektFü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');

Andereverwandte 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!