jquery - 如何使用 jQuery 为元素的背景不透明度设置动画？

Question

我的 HTML 标签上有一张图片作为背景，背景颜色为 rgba( 0,0,0, 0.7 );在我的 body 标签上。我正在构建一个小脚本，它允许我动态更改背景图像，为此，我想将主体动画设置为 rgba( 0,0,0,1 )，更改图像，然后设置动画回到0.7的不透明度。

我用 google 搜索发现有一个名为 jQuery Color 的 jQuery 插件但该插件似乎在最新版本的 jQuery“b.end 未定义”中被破坏。其他提出类似问题的人也回复了评论，称该解决方案不再有效。

我有点不知所措，所有谷歌搜索都指向同一个插件，还有其他人知道解决方案吗？

目前这就是我正在尝试的:

jQuery('body').animate({
    'backgroundColor':'rgba(0, 0, 0, 1)'
});

感谢您的帮助:)

Answer 1

jQuery UI可以开箱即用地执行此操作(因此您只需要 jQuery 和 jQuery UI)。

你几乎已经拥有它了。在 head 中添加 jQuery UI 脚本调用在 jQuery 脚本调用( <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> )之后，然后尝试以下操作:

jQuery('body').animate({
    backgroundColor: 'rgba(0, 0, 0, 1)'
});

backgroundColor是 jQuery 属性名称，不需要用引号引起来。仅当 CSS 属性具有不同的相应 jQuery 属性名称时才需要引号，即 background-color (backgroundColor 代表的 CSS 属性)。所以这也行得通:

jQuery('body').animate({
    'background-color': 'rgba(0, 0, 0, 1)'
});

这也可以通过纯 CSS3 动画非常简单地完成。