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