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

我有一张图片作为我的HTML标签和rgba（0,0,0，0.7）的背景颜色的背景;在我的BODY标签上。我正在构建一个小脚本，这将允许我即时更改背景图像，并执行此操作，我想将身体动画为rgba（0,0,0,1），更改图像，然后生成动画回到0.7的不透明度。如何使用jQuery动画元素的背景不透明度？

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

我有点茫然，所有Google搜索都会导致相同的插件，其他人是否知道解决方案？

目前，这是我尝试：

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

感谢所有帮助:)

来源

2013-07-18 Gazillion

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的属性名称，它不需要加引号。只有具有不同相应jQuery属性名称的CSS属性才需要引用，这将是background-color（backgroundColor代表的CSS属性）。所以这也可以工作：

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

这也可以用纯粹的CSS3动画完成。

来源

2013-07-18 19:10:11 Ennui

我对自己很生气，事实证明我没有jquery ui的最新版本，并且在事实之后添加了动画功能。感谢您确认这实际上是一种UI功能。 – Gazillion

-1

在此question，你可以找到一个方法来做到这一点：

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

来源

2013-07-18 18:55:51 Hernandcb

透明度会 – ntgCleaner

您是分辩@ntgCleaner，寻找这在谷歌了一下，好像在改变整个div的整个透明度，而不仅仅是背景颜色最简单的方法是使用插件。 [这]（http://www.bitstorm.org/jquery/color-animation/）看起来不错，而且非常光滑。 – Hernandcb

不幸的是，插件也是旧的，似乎没有与我使用的jQuery版本（最新版本）一起工作。 – Gazillion

我还没有完成这段代码，但这是纯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然后将控制会充当你的背景颜色可变的百分比。这不是有效的，但它正是你想要的想法。

UPDATE检查这里的小提琴：http://jsfiddle.net/mV4st/3/

来源

2013-07-18 19:15:33 ntgCleaner

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

回答

相关问题