From 7e4a22d0cf133f9d8682f0c4641d9da163d9fdc8 Mon Sep 17 00:00:00 2001 From: Benjamin Morel Date: Wed, 3 Feb 2016 18:16:51 +0100 Subject: [PATCH] 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. --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 4f188b5..96f9d82 100644 --- a/README.md +++ b/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/). +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: ```css