Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
jQuery plugin to dynamically apply animate.css animations

Use the animate.css animations from




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)
'visibility': 'visible'
// If the element is hidden
if ($':hidden')) {
// Show it
// Event triggered when the animation has finished
$this.bind('webkitAnimationEnd animationend oAnimationEnd', function () {
// Add a callback event
if (typeof callback == 'function') {
// Execute the callback;
// Specify the delay
}, delay);
;(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(":hidden")){}e.bind("webkitAnimationEnd animationend oAnimationEnd",function(){if(typeof d=="function"){}})},c)})}})(jQuery);
Copy link

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