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背景颜色的元素上使用它时 - 即它的背景颜色：透明

如何将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);
};

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

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

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

    });
};

如何使这个'flash'背景功能适用于具有透明bg颜色的元素？

1 个答案: