Use the animate.css animations from http://daneden.me/animate/
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); |
Added Opera animation end event