列表的背景色不透明度从明亮到暗淡的动画 - jQuery jQuery

Question

我想让我的.通知列表突出显示。

1. 通知列表高亮显示
2. 在1秒内将背景颜色不透明度从亮到暗（从0.8--> .3）的动画。
3. 闪烁文字3次。

我做了这些。

请注意。

hexToRgb(faHexColor, opacity=.5 ) = rgba(255,193,7,0.5)

我一直得到

Uncaught TypeError.无法读取未定义的属性'0'。无法读取未定义的属性'0'。

如果我做了这些。

    $('ul.nfTable').find('.operationalEventText').first()
    .css({ 'background-color': hexToRgb(faHexColor, opacity =.8 ) })
    .css({ 'background-color': hexToRgb(faHexColor, opacity =.3 ) })
    .animate({ border: '1px solid ' + hexToRgb(faHexColor, opacity =.3 ) }, 1000)
    .animate({ color: faHexColor }, 300).animate({ color: "white" }, 300)
    .animate({ color: faHexColor }, 300).animate({ color: "white" }, 300)
    .animate({ color: faHexColor }, 300).animate({ color: "white" }, 300);


    $('ul.nfTable').find('.operationalEventText').first().animate({'background-color': '#abcdef',
        'opacity': 0.3}, 100);

它的工作，但我的控制台，去疯狂。

Answer 1

所有的动画属性都应该被动画成一个单一的数值，除了下面提到的，大多数非数值的属性不能使用基本的jQuery功能进行动画（例如：......）。width, height或 left 可以动画化，但 background-color 不能，除非使用jQuery.Color插件）。)

最好是添加jQuery UI库来修改背景颜色与动画。

jQuery UI捆绑了jQuery Color插件，它提供了颜色动画以及许多实用的颜色处理功能。

$(function() {
  $(".box").click(function() {
    $(".box").animate({
      backgroundColor: "rgba(255, 193, 7, 1.0)"
    }, 1000, function() {
      console.log("Animation completed.");
    });
  });
});

.box {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="box"></div>