How to encapsulate animate.css code with jQuery

This time I will show you how to use jQuery to encapsulate the animate.css code, and what are the precautions for using jQuery to encapsulate the animate.css code. The following is a practical case, let’s take a look together. take a look.

animate.css is an interesting, cross-browser css3 animation library.

1. First introduce the animate css file

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

2. Add the specified animation style to the specified element Name

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

This includes two class names. The first one is the basic style name that must be added. Any element you want to implement must add this. The second is the specified animation style name.

3. If you want to dynamically add an animation style to an element, you can do it through jquery

Add animationObjectAdd a class, and then listen to the animation end eventEvent. Once the animation ends, remove the previously added class immediately.

The official package of jQuery is given:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese websiteOthers related articles!

Recommended reading:

jquery's form validation submission

jQuery's checkbox selection and getting the value

How to implement Jquery ajax asynchronous cross-domain

The above is the detailed content of How to encapsulate animate.css code with jQuery. For more information, please follow other related articles on the PHP Chinese website!