Question

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

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

我有点不知所措，所有谷歌搜索导致相同的插件，还有其他人知道解决方案吗？

目前这正是我正在尝试的：

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

感谢您的帮助：）

Answer 1

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

你几乎拥有它。在jQuery脚本调用（head）之后，在<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>中添加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动画也可以很简单地完成。

Answer 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);

});

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

更新检查此处的小提琴：http://jsfiddle.net/mV4st/3/

Answer 3

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

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

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

3 个答案: