Skip to content

Instantly share code, notes, and snippets.

@ahmednuaman
Created December 7, 2011 14:38
Show Gist options
  • Save ahmednuaman/1443035 to your computer and use it in GitHub Desktop.
Save ahmednuaman/1443035 to your computer and use it in GitHub Desktop.
jQuery plugin to dynamically apply animate.css animations

Use the animate.css animations from http://daneden.me/animate/

USAGE:

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    alert('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', 500);

With delay AND callback

$('#your-id').animateCSS('fadeIn', 1000, function(){
    alert('Boom! Animation Complete');
});
(function ($) {
$.fn.animateCSS = function (effect, delay, callback) {
// Return this to maintain chainability
return this.each(function () {
// Cache $(this) for speed
var $this = $(this);
// Check if delay exists or if it's a callback
if (!delay || typeof delay == 'function') {
// If it's a callback, move it to callback so we can call it later
callback = delay;
// Set the delay to 0 for the setTimeout
delay = 0;
}
// Start a counter so we can delay the animation if required
var animation = setTimeout(function () {
// Add the animation effect with classes
$this.addClass('animate ' + 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('webkitAnimationEnd animationend oAnimationEnd', function () {
// Add a callback event
if (typeof callback == 'function') {
// Execute the callback
callback.call(this);
}
});
// Specify the delay
}, delay);
});
};
})(jQuery);
;(function(a){a.fn.animateCSS=function(b,c,d){return this.each(function(){var e=a(this);if(!c||typeof c=="function"){d=c;c=0}var f=setTimeout(function(){e.addClass("animate "+b);if(e.css("visibility")=="hidden"){e.css({visibility:"visible"})}if(e.is(":hidden")){e.show()}e.bind("webkitAnimationEnd animationend oAnimationEnd",function(){if(typeof d=="function"){d.call(this)}})},c)})}})(jQuery);
@ahmednuaman
Copy link
Author

Added Opera animation end event

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment