mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-18 01:50:36 +01:00
Add a custom jQuery function in the README
In addition to explaining how to use `addClass()` and `one('... animationend')`, it can be useful to provide a turnkey solution that adds this functionality to jQuery.
This commit is contained in:
parent
42ca45da4a
commit
7e4a22d0cf
1 changed files with 19 additions and 0 deletions
19
README.md
19
README.md
|
@ -130,6 +130,25 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat
|
||||||
|
|
||||||
**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
|
**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
|
||||||
|
|
||||||
|
You can also extend jQuery to add a function that does it all for you:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$.fn.extend({
|
||||||
|
animateCss: function (animationName) {
|
||||||
|
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||||||
|
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
|
||||||
|
$(this).removeClass('animated ' + animationName);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
And use it like this:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$('#yourElement').animateCss('bounce');
|
||||||
|
```
|
||||||
|
|
||||||
You can change the duration of your animations, add a delay or change the number of times that it plays:
|
You can change the duration of your animations, add a delay or change the number of times that it plays:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
|
Loading…
Reference in a new issue