jquery - 如何使这个 'flash' 背景函数在具有透明背景颜色的元素上工作？

Question

我一直在玩一个简单的函数，它基本上使具有背景颜色的元素闪烁，然后淡出。它工作得很好:

$.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);
};

然后通过以下方式调用:

$('input.flasher').animateHighlight('#e9fff5',1000);

问题是，当我尝试在没有 css 背景颜色的元素上使用它时 - 即它的 背景颜色:透明

如何将背景颜色淡化为透明？或者至少创造一种幻觉，那就是所发生的事情？

我更改了函数以包含附加属性“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);
};

这工作正常，但是当最终结果需要是具有透明背景颜色的输入时，我的字段留下了以其样式编写的originalColor。

我猜我可以添加一些额外的功能，在动画结束时删除背景颜色，但想知道如何实现这一点，或者更好的方法。

Answer 1

在动画后添加背景颜色的删除:

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

    });
};