Skip to content

Instantly share code, notes, and snippets.

@flimshaw
Created July 23, 2012 20:41
Show Gist options
  • Save flimshaw/3166097 to your computer and use it in GitHub Desktop.
Save flimshaw/3166097 to your computer and use it in GitHub Desktop.
Little jQuery plugin for calling CSS3 animations and attaching callbacks to them
// Generated by CoffeeScript 1.3.3
//
// animateCss jQuery Plugin by Charlie Hoey <charlie.hoey@gmail.com>
//
// DESCRIPTION: Apply a CSS3 animation class, and and a callback to fire
// when it's done. Works well with animate.css (http://daneden.me/animate/)
// but custom css styles work just fine too.
//
// USAGE: $("#divID").animateCss({ startAnimation: "bounceOutRight", callback: function() { console.log("Done!"); });
//
// OPTIONS:
// callback: callback function
// startAnimation: name of class containing the desired CSS3 animation
(function() {
var $;
$ = jQuery;
$.fn.extend({
animateCss: function(options) {
var log, settings;
settings = {
startAnimation: 'shake',
callback: false,
forceBlock: true
};
settings = $.extend(settings, options);
return this.each(function() {
var obj;
obj = this;
obj.finished = false;
// add our animation class, which also incidentally starts the animation
$(obj).addClass("animated " + settings.startAnimation);
// make sure our object is display: block
if (!settings.forceBlock) {
$(obj).css({
'display': 'block'
});
}
// bind our callback function to the webkit event
return $(obj).bind("webkitAnimationEnd", function(event) {
// remove our first animation, preparing us for more animations later
$(obj).removeClass(settings.startAnimation);
// if we have defined a callback function, call it
if (settings.callback !== false) {
return settings.callback();
}
});
});
}
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment