jquery animate()不能处理css属性

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颜色插件来制作background-color动画，该插件与jQuery UI捆绑在一起(请参阅here)。

然而，我不认为你可以动画渐变。

查看jquery Color here的文档，它看起来只接受十六进制(#000)、rgba (rgba(0, 0, 0, 0))和一些名称值(black)。

Answer 2

背景、颜色和其他一些属性不能使用Jquery本身进行动画处理

仅可设置动画的属性属性：

backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

阅读有关动画的更多信息以及可以为哪些属性设置动画的here

Answer 3

不能对background进行动画处理，因为它不是动画属性。

查看可以通过css 动画的属性列表

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