Question

我正在尝试使用jQuery .animate()来制作div更改的背景，如果它在页面上滚动超过100个像素。我包含了jQuery UI，所以没有问题，代码在我使用.css()之前就已经工作了。
JS：

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#top-links-bar').stop().animate({ 'background' : 'linear-gradient(white, gray)' }, 500);
    } else {
        $('#top-links-bar').stop().animate({ 'background' : 'none' });
    }
});

年长的JS（工作）：

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#top-links-bar').stop().css('background','linear-gradient(white, gray)');
    } else {
        $('#top-links-bar').stop().css('background','none');
    }
});

Fiddle

Answer 1

您无法为background制作动画，但您应该能够使用与jQuery UI捆绑在一起的jQuery Color插件为background-color制作动画（请参阅here）。

但是，我认为你不能为渐变做出动画。

查看jquery Color here的文档，看起来它只接受hex（#000），rgba（rgba(0, 0, 0, 0)）和一些名称值（black）

Answer 2

背景，颜色和其他一些属性无法使用Jquery本身进行动画处理

只有可以设置动画的属性：

WHERE NOT

详细了解动画以及哪些属性可以设置动画here

Answer 3

您无法为background制作动画，因为它不是动画属性。

通过css

查看动画的属性列表

http://www.w3schools.com/jquery/eff_animate.asp

Answer 4

背景属性无法设置动画。

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

速记CSS属性（例如字体，背景，边框）不完整支持的。例如，如果要为渲染边框设置动画宽度，至少是边框样式和边框宽度，而不是＆＃34; auto＆＃34;必须提前设定。或者，如果要为字体大小设置动画，则可以使用 fontSize或CSS等效字体＆＃39; font-size＆＃39;而不仅仅是＆＃39; font＆＃39;。

Answer 5

你不能在jquery中使用javascript ad css为背景设置动画。

window.onscroll=function(){

   if(window.pageYOffset>100){
      document.getElementById('YOURID').webkitAnimation='chbg 500ms';
   } else document.getElementById('YOURID').webkitAnimation='nobg 500ms';

}

将此添加到css

@-webkit-keyframes chbg{
from{background:a};
to{background:b};
}
@-webkit-keyframes nobg{
from{background:a};
to{background:none};
}

jquery animate（）不使用css属性

5 个答案: