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 Color 插件为 background-color 设置动画，该插件与 jQuery UI 捆绑在一起(参见 here ).

但是，我认为您无法制作渐变动画。

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