Utiliser jQuery pour encapsuler animate.css (tutoriel détaillé)-js tutoriel-php.cn

Utiliser jQuery pour encapsuler animate.css (tutoriel détaillé)

亚连

Libérer： 2018-06-13 17:18:05

original

1957 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple d'encapsulation jQuery d'animate.css. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

animate.css est une bibliothèque d'animation CSS3 amusante et multi-navigateurs.

1. Introduisez d'abord le fichier CSS animé

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

Copier après la connexion

2. Ajoutez l'élément spécifié à l'élément spécifié. element Nom du style d'animation

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

Copier après la connexion

Cela comprend deux noms de classe. Le premier est le nom du style de base qui doit être ajouté. Tout élément que vous souhaitez implémenter doit l'ajouter. Le second est le nom du style d'animation spécifié.

3. Si vous souhaitez ajouter dynamiquement un style d'animation à un élément, vous pouvez le faire via jquery

Ajouter une classe au objet d'animation, puis écoutez l'événement de fin d'animation. Une fois l'animation terminée, supprimez immédiatement la classe précédemment ajoutée.

Le package officiel de jQuery est donné :

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.