Question

我正在创建导航栏看到我的小提琴：https://jsfiddle.net/dfbwp71u/ 当我使用css()它正常工作但我使用animate()时它没有给我结果。

我的HTML：

  <nav class="navigation navbar-fixed-top">

  </nav>

jquery的：

$(window).scroll(function(){
 // these conditional statements are working fine
if($(window).scrollTop() > 5)
{
  $('.navigation').css({
    'background-color':'#000'
  });
}
else
{ 
  $('.navigation').css({
    'background-color':'#eee'
  });
}

});

当我将.css()替换为animate()时，它会停止向我提供结果。

   // ???
  $('.navigation').animate({
    'background-color':'#000'
  });

Answer 1

除非您对animate css

不满意，否则您不需要transition

<强> DEMO

我要做的只是添加名为class的{{1}}并分配fixed：background-color，如下所示：

#000

然后我会根据以下条件切换此.fixed{ background-color:#000 }：

class

我们需要在这里添加的主要内容是$(window).scroll(function(){ if($(window).scrollTop() > 5) { $('.navigation').addClass('fixed'); } else { $('.navigation').removeClass('fixed'); } });属性transition，它会照顾休息：

.navigation

Answer 2

根据http://api.jquery.com/animate/

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，宽度，高度，或左边可以动画，但背景颜色不能，除非使用jQuery.Color插件）

所以要么使用 jquery-ui 或 jQuery.Color 插件

Answer 3

如果你没有添加和更改css属性名称'background-color'到'backgroundColor'，请添加Jquery UI，

$(window).scroll(function(){
if($(window).scrollTop() > 5)
{
  $('.navigation').animate({backgroundColor:'#eee'});
}
else
{ 
  $('.navigation').animate({backgroundColor:'#000'});
}
});

如何使用jquery为导航栏设置动画

3 个答案: