Question

我正在尝试使用动画更改导航背景颜色，但它不起作用。

我目前有以下代码：

cd /Applications/Chromium.app/Contents/MacOS/; ./Chromium --pro-server="socks5://localhost:1234" ; cd -

Answer 1

如上所述，jQuery .animate（）仅适用于数字属性，例如 width ， height 和 margin ，但不是颜色 - 在这种情况下你需要一个插件。请参阅：http://api.jquery.com/animate/

但是，您可以使用CSS过渡属性来实现类似的效果。

// CSS

#posnav { 
    background-color: transparent;
    transition: background-color 0.5s ease;
}
#posnav.scrolled {
    background-color: #aa0000; 
}

// JS:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $('#posnav').addClass('scrolled');
    } else {
      $('#posnav').removeClass('scrolled');
    }
  });
});

有关详细信息，请参阅https://css-tricks.com/almanac/properties/t/transition。

PS。请注意，您的CSS代码包含拼写错误。它应该是透明（没有标记符号，拼写为＆＃39; e＆＃39;）。

JQUERY - 动画naviagtion背景颜色

1 个答案: