Last active
August 29, 2015 14:10
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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