Skip to content

Instantly share code, notes, and snippets.

@cullenjohnson
Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cullenjohnson/3d529bbfc7a555d1e640 to your computer and use it in GitHub Desktop.
Save cullenjohnson/3d529bbfc7a555d1e640 to your computer and use it in GitHub Desktop.
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