JQUERY

Question

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

我目前得到以下代码：

//NAV

    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() > 50) {
          $("#posnav").animate({
          backgroundColor: "#aa0000"
        }, 1000 );
        } else {
          $("#posnav").animate({
          backgroundColor: "#transparant"
        }, 1000 );
        }
      });
    });

Answer 1

如上所述，jQuery .animate() 仅适用于数字属性，例如 width、height 和边距，但不是颜色——在这种情况下，您需要一个插件。参见：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 代码包含错字。它应该是 transparent（没有英镑符号，拼写为 'e'）。

JQUERY - 动画导航背景颜色

JQUERY - Animated naviagtion background-color

animation

background-color