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

Question

I'm trying to make my :

1. notification list highlighted
2. animate background color opacity from brighter to dim (from .8 --> .3) in 1 second.
3. blink text 3 times.

I did these :

Please Note:

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

I kept getting

Uncaught TypeError: Cannot read property '0' of undefined

If I did these:

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

It's working, but my console, went crazy.

标签： javascripthtmljquerycsshtml-lists

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>