Question

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 you would go about achieving this, or a better approach.

Answer 1

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', '');

    });
};