jquery动画颜色仅在滚动时工作一次

Question

    $(window).scroll(function() 
{
    if (window.matchMedia('(min-width: 900px)').matches)
    {
        if ($(this).scrollTop()>0)
        {
            $('#upper_bar_desktop').animate({"background-color": "#ffffff" , "color": "#000000"}, 1200 );
        }

        else{
            $("#upper_bar_desktop").animate({"background-color": "initial" , "color": "#ffffff"}, 1200 );
        }
     }
 });

我已经编写了这段代码来改变我的上栏的背景颜色和字体颜色向下滚动，它在滚动一次时可以完美地工作，但是当我再次返回时它不会执行动画。

感谢您的帮助

Answer 1

将初始颜色更改为任何颜色。例如#000000。

jQuery 不能动画到初始。

我还建议使用类。

    if ($(this).scrollTop()>0)
    {
        $('#upper_bar_desktop').addClass('fixed'); 
    }

    else{
        $('#upper_bar_desktop').removeClass('fixed'); 
    }

然后你只使用 CSS 过渡动画。

#upper_bar_desktop{
  transition:1s;
}

#upper_bar_desktop.fixed{
  background:#fffff;
  color:red;
}