Comment encapsuler le code animate.css avec jQuery

Cette fois, je vais vous montrer comment utiliser jQuery pour encapsuler le code animate.css, et quelles sont les précautions pour utiliser jQuery pour encapsuler le code animate.css. Voici un cas pratique, regardons ensemble Jetez un oeil.

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

1. Introduisez d'abord le fichier CSS animé

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

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>

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

Donner l'animation objetAjoutez une classe, puis écoutez la fin de l'animation événement Une fois que vous entendez la fin de l'animation, supprimez immédiatement la classe précédemment ajoutée.

Le package officiel de jQuery est fourni :

//扩展$对象，添加方法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');

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention au site Web php chinoisAutres articles liés !

Lecture recommandée :

soumission de validation du formulaire jquery

sélection des cases à cocher jQuery et obtention de la valeur

Comment implémenter Jquery ajax asynchrone cross-domain

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!