diff --git a/README.md b/README.md index 1870fc4..a79caa7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -This is my extension on Craig Dennis' fab plugin. It allows us to pass a custom "animated" class for different timings, etc. - Use the animate.css animations from http://daneden.me/animate/ +This is my extension on Craig Dennis' fab plugin. It allows us to pass a custom "animated" class for different timings, etc. + ## USAGE: Basic @@ -57,4 +57,22 @@ $(window).load( function(){ }); +Additional options: + +lastCallbackOnly: The given callback will be fired after THE LAST matching element of the selector has ended its animation. +
+{ 
+    lastCallbackOnly : true
+}
+
+ +lastCallback: Optional, additional callback to be called when all animations on all mathing elements of the selector have ended their animation. +
+{ 
+    lastCallback: function() {
+        // Code ....
+    }
+}
+
+ Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews). diff --git a/animateCSS.js b/animateCSS.js index c2d35de..bfaffc8 100644 --- a/animateCSS.js +++ b/animateCSS.js @@ -5,7 +5,7 @@ $.fn.animateCSS = function (effect, callback, params) { - // Check if there were params hand over in the callback + // Check if there were params handed over in the callback if (callback && typeof callback !== "function") { params = callback } @@ -13,11 +13,17 @@ // Deal with params array and set some default values var settings = $.extend({ delay: 0, - animateClass: 'animated' + animateClass: 'animated', + lastCallbackOnly: false, + lastCallback: null, + transistionsSupported: true }, params); - + + // Global variables + var intLength = this.length; + // Return this to maintain chainability - return this.each(function () { + return this.each(function (index) { // Cache $(this) for speed and compression var $this = $(this), @@ -26,12 +32,14 @@ visibility = "visibility", visible = "visible", hidden = "hidden"; - + // Create a function we can call later function run() { - // Add the animation effect with classes - $this.addClass( animated + " " + effect); + // Add the animation effect with classes if transistions are supported + if (settings.transistionsSupported) { + $this.addClass(animated + " " + effect); + } // Check if the elemenr has been hidden to start with if ($this.css( visibility ) === hidden) { @@ -49,27 +57,69 @@ } - // Event triggered when the animation has finished - $this.bind( transitionEnd, function () { - - // Remove the classes so they can be added again later - $this.removeClass(animated + " " + effect); - - // Add a callback event - if (typeof callback === "function") { + // Call callbacks immediately if transistions are not supported + if (!settings.transistionsSupported) { + // Check if callback is meant to run on every element or only on last + if (typeof callback === "function" && (settings.lastCallbackOnly == false || index == intLength - 1)) { // Execute the callback callback.call(this); - // Unbind the event handlers - $this.unbind( transitionEnd ); + } + + // Check if lastCallback is meant to run + if (typeof settings.lastCallback === "function" && index == intLength - 1) { + + // Execute the callback + settings.lastCallback.call(this); } + } + + } + + // Event triggered when the animation has finished + $this.bind(transitionEnd, function () { + + // Remove the classes so they can be added again later + $this.removeClass(animated + " " + effect); + + }); + + // Check if callback is meant to run on every element or only on last + if (typeof callback === "function" && (settings.lastCallbackOnly == false || index == intLength - 1)) { + + $this.bind(transitionEnd, function () { + + // Execute the callback + callback.call(this); + + }); + + } + + // Check if lastCallback is meant to run + if (typeof settings.lastCallback === "function" && index == intLength - 1) { + + $this.bind(transitionEnd, function () { + + // Execute the callback + settings.lastCallback.call(this); }); } + // Event triggered when the animation has finished + $this.bind(transitionEnd, function () { + + // Unbind the event handlers + $this.unbind(transitionEnd); + + }); + + + // Check if delay exists or if it"s a callback if (!settings.delay || settings.delay == 0) { diff --git a/animateCSS.min.js b/animateCSS.min.js index 4405952..bad870a 100644 --- a/animateCSS.min.js +++ b/animateCSS.min.js @@ -1 +1 @@ -(function(c,b,a,d){c.fn.animateCSS=function(f,h,g){if(h&&typeof h!=="function"){g=h}var e=c.extend({delay:0,animateClass:"animated"},g);return this.each(function(){var n=c(this),j="webkitAnimationEnd oanimationend msAnimationEnd animationend",k=e.animateClass,i="visibility",o="visible",l="hidden";function m(){n.addClass(k+" "+f);if(n.css(i)===l){n.css(i,o)}if(n.is(":"+l)){n.show()}n.bind(j,function(){n.removeClass(k+" "+f);if(typeof h==="function"){h.call(this);n.unbind(j)}})}if(!e.delay||e.delay==0){m()}else{setTimeout(m,e.delay)}})}})(jQuery,window,document);(function(h,e,f,g){h.fn.animateCSS=function(c,a,b){var d=h.extend({delay:0,animateClass:"animated"},b);return this.each(function(){var v=h(this),s="webkitAnimationEnd oanimationend msAnimationEnd animationend",r=d.animateClass,t="visibility",u="visible",q="hidden";function p(){v.addClass(r+" "+c);if(v.css(t)===q){v.css(t,u)}if(v.is(":"+q)){v.show()}v.bind(s,function(){v.removeClass(r+" "+c);if(typeof a==="function"){a.call(this);v.unbind(s)}})}if(!d.delay||d.delay==0){p()}else{setTimeout(p,d.delay)}})}})(jQuery,window,document);(function(h,f,g,e){h.fn.animateCSS=function(c,a,b){return this.each(function(){function l(){d.addClass(r+" "+c);if(d.css(i)===s){d.css(i,o)}if(d.is(":"+s)){d.show()}d.bind(t,function(){d.removeClass(r+" "+c);if(typeof b==="function"){b.call(this);d.unbind(t)}})}var d=h(this),t="webkitAnimationEnd oanimationend msAnimationEnd animationend",r="animated",i="visibility",o="visible",s="hidden";if(!a||typeof a==="function"){b=a;l()}else{setTimeout(l,a)}})}})(jQuery,window,document); \ No newline at end of file +(function(c,b,a,d){c.fn.animateCSS=function(f,i,h){if(i&&typeof i!=="function"){h=i}var e=c.extend({delay:0,animateClass:"animated",lastCallbackOnly:false,lastCallback:null,transistionsSupported:true},h);var g=this.length;return this.each(function(l){var p=c(this),k="webkitAnimationEnd oanimationend msAnimationEnd animationend",m=e.animateClass,j="visibility",q="visible",n="hidden";function o(){if(e.transistionsSupported){p.addClass(m+" "+f)}if(p.css(j)===n){p.css(j,q)}if(p.is(":"+n)){p.show()}if(!e.transistionsSupported){if(typeof i==="function"&&(e.lastCallbackOnly==false||l==g-1)){i.call(this)}if(typeof e.lastCallback==="function"&&l==g-1){e.lastCallback.call(this)}}}p.bind(k,function(){p.removeClass(m+" "+f)});if(typeof i==="function"&&(e.lastCallbackOnly==false||l==g-1)){p.bind(k,function(){i.call(this)})}if(typeof e.lastCallback==="function"&&l==g-1){p.bind(k,function(){e.lastCallback.call(this)})}p.bind(k,function(){p.unbind(k)});if(!e.delay||e.delay==0){o()}else{setTimeout(o,e.delay)}})}})(jQuery,window,document); \ No newline at end of file diff --git a/deploy/animateCSS.js b/deploy/animateCSS.js deleted file mode 100644 index 1675c8e..0000000 --- a/deploy/animateCSS.js +++ /dev/null @@ -1,90 +0,0 @@ -(function ($, window, document, undefined) { - - // Function-level strict mode syntax - 'use strict'; - - $.fn.animateCSS = function (effect, callback, params) { - - // Check if there were params hand over in the callback - if (callback && typeof callback !== "function") { - params = callback - } - - // Deal with params array and set some default values - var settings = $.extend({ - delay: 0, - animateClass: 'animated' - }, params); - - // Return this to maintain chainability - return this.each(function () { - - // Cache $(this) for speed and compression - var $this = $(this), - transitionEnd = "webkitAnimationEnd oanimationend msAnimationEnd animationend", - animated = settings.animateClass, - visibility = "visibility", - visible = "visible", - hidden = "hidden"; - - // Create a function we can call later - function run() { - - // Add the animation effect with classes - $this.addClass( animated + " " + effect); - - // Check if the elemenr has been hidden to start with - if ($this.css( visibility ) === hidden) { - - // If it has, show it (after the class has been added) - $this.css( visibility, visible); - - } - - // If the element is hidden - if ($this.is(":" + hidden)) { - - // Show it - $this.show(); - - } - - // Event triggered when the animation has finished - $this.bind( transitionEnd, function () { - - // Remove the classes so they can be added again later - $this.removeClass(animated + " " + effect); - - // Add a callback event - if (typeof callback === "function") { - - // Execute the callback - callback.call(this); - - // Unbind the event handlers - $this.unbind( transitionEnd ); - - } - - }); - - } - - // Check if delay exists or if it"s a callback - if (!settings.delay || settings.delay == 0) { - - // Run the animation (without delay) - run(); - - } else { - - // Start a counter so we can delay the animation if required - setTimeout( run, settings.delay ); - - } - - }); - - }; - -})(jQuery, window, document);(function(c,b,a,d){c.fn.animateCSS=function(f,h,g){var e=c.extend({delay:0,animateClass:"animated"},g);return this.each(function(){var n=c(this),j="webkitAnimationEnd oanimationend msAnimationEnd animationend",k=e.animateClass,i="visibility",o="visible",l="hidden";function m(){n.addClass(k+" "+f);if(n.css(i)===l){n.css(i,o)}if(n.is(":"+l)){n.show()}n.bind(j,function(){n.removeClass(k+" "+f);if(typeof h==="function"){h.call(this);n.unbind(j)}})}if(!e.delay||e.delay==0){m()}else{setTimeout(m,e.delay)}})}})(jQuery,window,document);(function(c,a,d,b){c.fn.animateCSS=function(e,g,f){return this.each(function(){function j(){m.addClass(q+" "+e);if(m.css(k)===p){m.css(k,h)}if(m.is(":"+p)){m.show()}m.bind(n,function(){m.removeClass(q+" "+e);if(typeof f==="function"){f.call(this);m.unbind(n)}})}var m=c(this),n="webkitAnimationEnd oanimationend msAnimationEnd animationend",q="animated",k="visibility",h="visible",p="hidden";if(!g||typeof g==="function"){f=g;j()}else{setTimeout(j,g)}})}})(jQuery,window,document); \ No newline at end of file diff --git a/deploy/animateCSS.min.js b/deploy/animateCSS.min.js deleted file mode 100644 index 4405952..0000000 --- a/deploy/animateCSS.min.js +++ /dev/null @@ -1 +0,0 @@ -(function(c,b,a,d){c.fn.animateCSS=function(f,h,g){if(h&&typeof h!=="function"){g=h}var e=c.extend({delay:0,animateClass:"animated"},g);return this.each(function(){var n=c(this),j="webkitAnimationEnd oanimationend msAnimationEnd animationend",k=e.animateClass,i="visibility",o="visible",l="hidden";function m(){n.addClass(k+" "+f);if(n.css(i)===l){n.css(i,o)}if(n.is(":"+l)){n.show()}n.bind(j,function(){n.removeClass(k+" "+f);if(typeof h==="function"){h.call(this);n.unbind(j)}})}if(!e.delay||e.delay==0){m()}else{setTimeout(m,e.delay)}})}})(jQuery,window,document);(function(h,e,f,g){h.fn.animateCSS=function(c,a,b){var d=h.extend({delay:0,animateClass:"animated"},b);return this.each(function(){var v=h(this),s="webkitAnimationEnd oanimationend msAnimationEnd animationend",r=d.animateClass,t="visibility",u="visible",q="hidden";function p(){v.addClass(r+" "+c);if(v.css(t)===q){v.css(t,u)}if(v.is(":"+q)){v.show()}v.bind(s,function(){v.removeClass(r+" "+c);if(typeof a==="function"){a.call(this);v.unbind(s)}})}if(!d.delay||d.delay==0){p()}else{setTimeout(p,d.delay)}})}})(jQuery,window,document);(function(h,f,g,e){h.fn.animateCSS=function(c,a,b){return this.each(function(){function l(){d.addClass(r+" "+c);if(d.css(i)===s){d.css(i,o)}if(d.is(":"+s)){d.show()}d.bind(t,function(){d.removeClass(r+" "+c);if(typeof b==="function"){b.call(this);d.unbind(t)}})}var d=h(this),t="webkitAnimationEnd oanimationend msAnimationEnd animationend",r="animated",i="visibility",o="visible",s="hidden";if(!a||typeof a==="function"){b=a;l()}else{setTimeout(l,a)}})}})(jQuery,window,document); \ No newline at end of file diff --git a/deploy/mergejs.bat b/deploy/mergejs.bat deleted file mode 100644 index 888056a..0000000 --- a/deploy/mergejs.bat +++ /dev/null @@ -1,5 +0,0 @@ -del *.js -cd .. -TYPE *.js >> deploy/animateCSS.js -cd deploy -java -jar yuicompressor-2.4.8.jar animateCSS.js -o animateCSS.min.js \ No newline at end of file diff --git a/deploy/yuicompressor-2.4.8.jar b/deploy/yuicompressor-2.4.8.jar deleted file mode 100644 index a1cf0a0..0000000 Binary files a/deploy/yuicompressor-2.4.8.jar and /dev/null differ