Flashes the selected element a certain color or style for a configurable number of seconds (without needing jQuery UI).
jQuery.fn.extend({ | |
/** $().flash(options) | |
* | |
* Author: Cullen Johnson | |
* URL: https://gist.github.com/cullenjohnson/3d529bbfc7a555d1e640 | |
* | |
* Description: | |
* Flashes an element's background-color, then fades back to the element's original background-color | |
* | |
* REQUIRES jQuery 1.4+ (jQuery UI is NOT needed) | |
* | |
* options (Object) | |
* - duration (Number): the total amount of time in milliseconds for the animation. Default: 2000, minimum 400 | |
* - css (Object): CSS rules to apply to the element momentarily. OVERRIDES color. Default: undefined | |
* - color (String): the CSS color to flash the background to momentarily. Default: 'yellow' | |
* - complete (Function): the function to be called when the whole animation is complete. | |
*/ | |
flash: function(options) { | |
options = options || {}; | |
options.duration = options.duration || 2000; | |
options.color = options.color || 'yellow'; | |
options.css = options.css || {'background-color': options.color}; | |
return this.each(function() { | |
var fadeInDuration = Math.max(options.duration / 8, 50), | |
delayDuration = Math.max(options.duration / 10, 40), | |
fadeOutDuration = Math.max(options.duration - (fadeInDuration + delayDuration), 310), | |
originalCSS = {}, | |
computedStyle = window.getComputedStyle(this, null), | |
cssKey; | |
// finish all running animations; this return the original CSS immediately in case the element is currently in a "flashing" state. | |
$(this).finish(); | |
for (cssKey in options.css) { | |
originalCSS[cssKey] = computedStyle.getPropertyValue(cssKey) || $(this).css(cssKey) || null; | |
} | |
$(this).animate( | |
options.css, | |
fadeInDuration, | |
'swing' | |
).queue(function() { | |
$(this).delay(delayDuration); | |
$(this).animate( | |
originalCSS, | |
fadeOutDuration, | |
'swing', | |
options.complete || null | |
); | |
$(this).dequeue(); | |
}); | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment