Skip to content

Commit 7e4a22d

Browse files
committed
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.
1 parent 42ca45d commit 7e4a22d

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,25 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat
130130

131131
**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/).
132132

133+
You can also extend jQuery to add a function that does it all for you:
134+
135+
```javascript
136+
$.fn.extend({
137+
animateCss: function (animationName) {
138+
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
139+
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
140+
$(this).removeClass('animated ' + animationName);
141+
});
142+
}
143+
});
144+
```
145+
146+
And use it like this:
147+
148+
```javascript
149+
$('#yourElement').animateCss('bounce');
150+
```
151+
133152
You can change the duration of your animations, add a delay or change the number of times that it plays:
134153

135154
```css

0 commit comments

Comments
 (0)