Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

ahmednuaman commented Dec 7, 2011

Added Opera animation end event

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