jquery - 如何使此“闪光灯”背景功能在具有透明bg颜色的元素上起作用？

我一直在玩一个简单的函数，该函数基本上会先闪烁具有背景色的元素，然后逐渐消失。效果很好：

$.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 background-color的元素上使用此元素-即它的background-color：透明时

如何将backgroundColor淡化为透明？或至少制造出会发生什么错觉？

我更改了功能以包含附加属性“ 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。

我猜想我可以添加一些额外的功能，以便在动画结束时删除backgroundColor，但想知道如何实现此目标或更好的方法。

最佳答案

在动画之后添加背景色的去除：

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

    });
};

关于jquery - 如何使此“闪光灯”背景功能在具有透明bg颜色的元素上起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7414496/