1

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

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

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

目前这是我正在尝试的：

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

谢谢你的帮助 ：）

4

3 回答 3

4

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

你几乎拥有它。head在 jQuery 脚本调用 ( ) 之后添加 jQuery UI 脚本调用<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 属性名称，不需要用引号引起来。只有具有不同的相应 jQuery 属性名称的 CSS 属性才需要引号，这将是background-color（代表的 CSS 属性backgroundColor）。所以这也可以：

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

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

于 2013-07-18T19:10:11.217 回答
0

我还没有完成这段代码，但这是纯 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);

});

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

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

于 2013-07-18T19:15:33.650 回答
-1

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

$(document.body).animate({opacity: 1}, 1000);
于 2013-07-18T18:55:51.993 回答