我正在尝试使用 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');
}
});
最佳答案
您不能为 background
设置动画,但您应该可以使用 jQuery Color 插件为 background-color
设置动画,该插件与 jQuery UI 捆绑在一起(参见 here ).
但是,我认为您无法制作渐变动画。
查看 jquery 颜色的文档 here看起来它只接受十六进制 (#000
)、rgba (rgba(0, 0, 0, 0)
) 和一些名称值 (black
)。
关于jquery animate() 不使用 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30629323/