Skip to content

Instantly share code, notes, and snippets.

@michikono
Created January 21, 2012 02:20
Show Gist options
  • Save michikono/1650822 to your computer and use it in GitHub Desktop.
Save michikono/1650822 to your computer and use it in GitHub Desktop.
jQuery Bump Animation Fixed
// taken from http://daveymorris.co.uk/web-development/bump-jquery-plugin-bounce
// improved with additional options
(function($){
$.bump = function(el, options){
// Some object and DOM instansiation to make traversing the DOM less expensive
var base = this;
base.$el = $(el);
base.el = el;
base.$el.data("bump", base);
base.init = function(){
base.options = $.extend({},$.bump.defaultOptions, options);
base.bumping = false;
if(base.options.autostart)
base.startbump(); // Autostart the bump if we need to
};
// Start the bump and set the timers and handles
base.startbump = function(event){
if(base.bumping)
return true;
base.$el.bind(base.options.bind,base.stopbump);
base.options.beforeAnim();
base.bumping = true;
base.timeval = setInterval(function(){base.$el.effect("bounce",base.options.effectOptions || {},base.options.duration,base.options.callback);},base.options.gap);
};
// Stop the bump and remove handles
base.stopbump = function(event){
if(!base.bumping)
return false;
base.options.beforeStop();
base.$el.unbind(base.options.bind,base.stopbump);
clearInterval(base.timeval); // Clear and stop the timer
base.bumping = false;
base.options.afterStop();
};
// Run initializer
base.init();
};
$.bump.defaultOptions = {
effectOptions: {}, // options handed to bounce effect
duration: 250, // How many miliseconds the bounce should last
gap: 2000, // How many miliseconds between bounces
autostart: true, // Whether we start straight away or wait
beforeAnim: function(){}, // Runs before the bumping starts
beforeStop: function(){}, // Runs just before the bumping is stopped
afterStop: function(){}, // Runs after the bumping has finished
bind: "mouseenter" // The handle we want the bumping to stop on, "click etc"
};
$.fn.bump = function(options){
return this.each(function(){
(new $.bump(this, options));
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment