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

Posted 2023-05-08

【中文标题】如何使用 jQuery 为元素的背景不透明度设置动画？

【英文标题】：How to animate the background opacity of an element using jQuery?

【发布时间】：2013-07-17 21:15:36

【问题描述】：

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

我用谷歌搜索了一个名为 jQuery Color 的 jQuery 插件，但该插件似乎在最新版本的 jQuery 中被破坏了“b.end is undefined”。其他问过类似问题的人也用 cmets 回答说这个解决方案不再有效。

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

目前这是我正在尝试的：

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

感谢您的帮助:)

【参考方案1】：

jQuery UI 可以开箱即用（所以您只需要 jQuery 和 jQuery UI）。

你几乎拥有它。在您的 jQuery 脚本调用 (<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>) 之后在 head 中添加 jQuery UI 脚本调用，然后试试这个：

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

backgroundColor 是 jQuery 属性名，不需要加引号。只有具有不同的相应 jQuery 属性名称的 CSS 属性才需要引号，这将是 background-color（backgroundColor 代表的 CSS 属性）。所以这也可以：

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

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

【讨论】：

我对自己很生气，原来我没有最新版本的 jquery ui，而且动画功能是事后添加的。感谢您确认这实际上是一个 UI 功能。

【参考方案2】：

这段代码我还没写完，但这是纯jQuery的基础。这对你来说是一个想法的开始。试试这样的：

$('.background').click(function()
    var changeColor;
    var speed = 100;
    var i = speed;
    changeColor = setInterval(function()
        i--;
        var opacity = i / speed;
        $('.background').css(backgroundColor: "rgba(0,0,0, " + opacity + ")");
    , 1);
    setTimeout(function(speed)
        clearInterval(changeColor);
     , speed * 5);

);

基本原则是每 1 毫秒更改一个数字，然后控制一个百分比，作为背景颜色的变量。这效率不高，但正是您正在寻找的想法。

更新在这里检查小提琴：http://jsfiddle.net/mV4st/3/

【参考方案3】：

在这个question 中，您可以找到一种方法：

$(document.body).animate(opacity: 1, 1000);

【讨论】：

不透明度会改变整个div的不透明度，而不仅仅是背景颜色

你是正确的@ntgCleaner，在谷歌中寻找这个似乎最简单的方法是使用插件。 This 看起来不错，很轻。

不幸的是，该插件也很旧，似乎不适用于我正在使用的 jQuery 版本（最新）。