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

Question

我正在尝试制作我的 :

通知列表突出显示
动画背景颜色不透明度在 1 秒内从亮到暗（从 .8 --> .3）。
闪烁文本 3 次。

我做了这些：

请注意：

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

我一直在

Uncaught TypeError: Cannot read property '0' of undefined

如果我做了这些：

    $('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

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used).

最好添加 jQuery UI 库以使用动画更改背景颜色。

jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.

$(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>

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

Animate Background Color Opacity of a List from brighter to dim - jQuery

html

javascript

css

jquery

html-lists

我正在尝试制作我的 :

请注意：