如何制作这个“闪光”？背景函数适用于具有透明背景颜色的元素吗？

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

然后调用 via:

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

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

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

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

    });
};