动画列表的背景颜色不透明度从亮到暗 - 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.

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).

Best to add the jQuery UI library to make changes to Background Color with Animation.

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>