diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ff5b12..7c9d9d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+
+### 1.2.1 (2015-03-23)
+
+
+
+## 1.2.0 (2015-03-23)
+
+#### Features
+
+* add animation duration option ([e1ef7983](https://github.com/craigmdennis/animatecss/commit/e1ef7983c25fec49254611ca4e19a88e5f4b1422))
+
+
### 1.1.5 (2014-05-27)
diff --git a/README.md b/README.md
index 39d6eda..ff58df4 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@ $(document).ready( function(){
infinite: false, // True or False
animationClass: "animated", // Can be any class
delay: 0 // Can be any value (in ms)
+ duration: 1000 // Can be any value (in ms)
callback: // Any function
}
```
@@ -75,6 +76,11 @@ $('#your-id').animateCSS('fadeIn', {
});
```
+### With duration (in ms)
+```js
+$('#your-id').animateCSS('fadeIn', {duration: 3000});
+```
+
### Chain multiple animations
If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.
```js
diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json
index 781ff1c..c10e1db 100644
--- a/animateCSS.jquery.json
+++ b/animateCSS.jquery.json
@@ -2,7 +2,7 @@
"name": "animateCSS",
"title": "Animate CSS jQuery Plugin",
"description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
- "version": "1.1.5",
+ "version": "1.2.1",
"homepage": "https://github.com/craigmdennis/animateCSS.git",
"author": {
"name": "Craig Dennis",
diff --git a/bower.json b/bower.json
index e18288a..b04df3b 100644
--- a/bower.json
+++ b/bower.json
@@ -2,7 +2,7 @@
"name": "animateCSS",
"description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
"main": "dist/jquery.animatecss.js",
- "version": "1.1.5",
+ "version": "1.2.1",
"dependencies": {
"animate.css": "~3.1.1"
},
diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js
index 7844104..be4b6c4 100644
--- a/dist/jquery.animatecss.js
+++ b/dist/jquery.animatecss.js
@@ -1,6 +1,6 @@
-/*! animateCSS - v1.1.5 - 2014-05-27
+/*! animateCSS - v1.2.1 - 2015-10-18
* https://github.com/craigmdennis/animateCSS
-* Copyright (c) 2014 Craig Dennis; Licensed MIT */
+* Copyright (c) 2015 Craig Dennis; Licensed MIT */
(function() {
'use strict';
@@ -10,13 +10,14 @@
$.fn.extend({
animateCSS: function(effect, options) {
- var addClass, animate, callback, complete, init, removeClass, settings, transitionEnd, unhide;
+ var addClass, animate, callback, complete, init, removeClass, setDuration, settings, transitionEnd, unhide;
settings = {
effect: effect,
delay: 0,
animationClass: 'animated',
infinite: false,
callback: options,
+ duration: 1000,
debug: false
};
transitionEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
@@ -29,6 +30,7 @@
settings.animationClass += ' infinite';
}
return setTimeout(function() {
+ setDuration(element);
unhide(element);
addClass(element);
return complete(element);
@@ -48,6 +50,14 @@
removeClass = function(element) {
return element.removeClass(settings.effect + ' ' + settings.animationClass);
};
+ setDuration = function(element) {
+ return element.css({
+ '-webkit-animation-duration': settings.duration + 'ms',
+ '-moz-animation-duration': settings.duration + 'ms',
+ '-o-animation-duration': settings.duration + 'ms',
+ 'animation-duration': settings.duration + 'ms'
+ });
+ };
callback = function(element) {
if (settings.infinite === false) {
removeClass(element);
@@ -57,7 +67,8 @@
}
};
complete = function(element) {
- return element.one(transitionEnd, function() {
+ return element.one(transitionEnd, function(event) {
+ event.stopPropagation();
return callback(element);
});
};
diff --git a/dist/jquery.animatecss.min.js b/dist/jquery.animatecss.min.js
index ee50a6c..8427783 100644
--- a/dist/jquery.animatecss.min.js
+++ b/dist/jquery.animatecss.min.js
@@ -1,5 +1,5 @@
-/*! animateCSS - v1.1.5 - 2014-05-27
+/*! animateCSS - v1.2.1 - 2015-10-18
* https://github.com/craigmdennis/animateCSS
-* Copyright (c) 2014 Craig Dennis; Licensed MIT */
+* Copyright (c) 2015 Craig Dennis; Licensed MIT */
-(function(){"use strict";var a;a=jQuery,a.fn.extend({animateCSS:function(b,c){var d,e,f,g,h,i,j,k,l;return j={effect:b,delay:0,animationClass:"animated",infinite:!1,callback:c,debug:!1},k="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",j=a.extend(j,c),h=function(a){return e(a)},e=function(a){return j.infinite===!0&&(j.animationClass+=" infinite"),setTimeout(function(){return l(a),d(a),g(a)},j.delay)},d=function(a){return a.addClass(j.effect+" "+j.animationClass+" ")},l=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},i=function(a){return a.removeClass(j.effect+" "+j.animationClass)},f=function(a){return j.infinite===!1&&i(a),"function"==typeof j.callback?j.callback.call(a):void 0},g=function(a){return a.one(k,function(){return f(a)})},this.each(function(){return h(a(this))})}})}).call(this);
\ No newline at end of file
+(function(){"use strict";var a;a=jQuery,a.fn.extend({animateCSS:function(b,c){var d,e,f,g,h,i,j,k,l,m;return k={effect:b,delay:0,animationClass:"animated",infinite:!1,callback:c,duration:1e3,debug:!1},l="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",k=a.extend(k,c),h=function(a){return e(a)},e=function(a){return k.infinite===!0&&(k.animationClass+=" infinite"),setTimeout(function(){return j(a),m(a),d(a),g(a)},k.delay)},d=function(a){return a.addClass(k.effect+" "+k.animationClass+" ")},m=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},i=function(a){return a.removeClass(k.effect+" "+k.animationClass)},j=function(a){return a.css({"-webkit-animation-duration":k.duration+"ms","-moz-animation-duration":k.duration+"ms","-o-animation-duration":k.duration+"ms","animation-duration":k.duration+"ms"})},f=function(a){return k.infinite===!1&&i(a),"function"==typeof k.callback?k.callback.call(a):void 0},g=function(a){return a.one(l,function(b){return b.stopPropagation(),f(a)})},this.each(function(){return h(a(this))})}})}).call(this);
\ No newline at end of file
diff --git a/package.json b/package.json
index 3458ffd..aca9512 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "animateCSS",
- "version": "1.1.5",
+ "version": "1.2.1",
"description": "Animate CSS jQuery Plugin",
"keywords": [
"jquery-plugin",
diff --git a/src/animatecss.coffee b/src/animatecss.coffee
index 46316a6..dd0aa93 100644
--- a/src/animatecss.coffee
+++ b/src/animatecss.coffee
@@ -16,6 +16,7 @@ $.fn.extend
animationClass: 'animated',
infinite: false
callback: options
+ duration: 1000
debug: false
# Vendor prefixed transition callbacks
@@ -35,6 +36,7 @@ $.fn.extend
# Run a timer regardless of delay (as 0 will fire instantly anyway)
setTimeout ->
+ setDuration( element )
unhide( element )
addClass( element )
complete( element )
@@ -53,20 +55,28 @@ $.fn.extend
removeClass = ( element ) ->
element.removeClass( settings.effect + ' ' + settings.animationClass )
+ # Add an animation duration
+ setDuration = ( element ) ->
+ element.css
+ '-webkit-animation-duration': settings.duration + 'ms',
+ '-moz-animation-duration': settings.duration + 'ms'
+ '-o-animation-duration': settings.duration + 'ms'
+ 'animation-duration': settings.duration + 'ms'
+
callback = ( element ) ->
# Only remove the animation classes if `infinite` is false
removeClass( element ) if settings.infinite == false
# Check if the callback is a function
if typeof settings.callback == 'function'
- # Execute the callback and return the origin element as `this`
+ # Execute the callback and return the original element as `this`
settings.callback.call( element )
# Event triggered when the animation has finished
complete = ( element ) ->
- element.one( transitionEnd, ->
+ element.one transitionEnd, (event) ->
+ event.stopPropagation()
callback( element )
- )
# Maintain chainability
return @each () ->