jquery animate() 不使用 css 属性

标签 jquery html css

我正在尝试使用 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

最佳答案

您不能为 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/

相关文章:

javascript - Jquery 和 html5 session 存储显示 json 下拉框中选择的最后状态

jquery - 如何从卡片或类似的东西中获取标题以与 flexbox 具有相同的高度?

html - 如何使IFRAME的大小与容器的大小一致?

html - 表 rowspan 错误 html 和 css

html - CSS3 Overlay Target 一键-两种过渡

Jquery:当用户单击父 <div> 内部时隐藏子 <div>

html - 使用 PJAX 更改页面标题?

css - 在 li 标签之间添加间隙时遇到问题

歌剧插图框阴影

javascript - 使用 jquery 深入多个级别(子级和后代)以获取文本