How to make this 'flash' background function work on an element with a transparent bg color?
I have been playing with a simple function which basically flashes an element with a background color, then fades out. It works quite well:
$.fn.animateHighlight = function(highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = this.css("backgroundColor");
this.stop().css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};
It is then called via:
$('input.flasher').animateHighlight('#e9fff5',1000);
The problem is however is when I've tried to use this on an element that doesn't have a css background-color - ie its background-color: transparent
How does one go about fading a backgroundColor to transparent? Or at least creating the illusion that is what happens?
I changed the function to include an additional attribute 'originalColor'
$.fn.animateHighlight = function(highlightColor, originalColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = originalColor || "#ffffff";
this.stop().css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};
This works ok, but then my field is left with the originalColor written in its style, when the end result needs to be an input that has a transparent background color.
I'm guessing I could add some extra functionality which removes backgroundColor at the end of the animation, but wondering how yo开发者_JAVA技巧u would go about achieving this, or a better approach.
Adding a removal of the background color after the animation:
$.fn.animateHighlight = function(highlightColor, originalColor, duration) {
var $this = $(this),
highlightBg = highlightColor || "#FFFF9C",
animateMs = duration || 1500,
originalBg = originalColor || "#ffffff";
this.stop().css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs,
function(){
$this.css('background-color', '');
});
};
精彩评论