jQuery的淡入淡出的CSS背景图像和颜色

Question

这里是样本：http://jsfiddle.net/Zg55k/

我怎样才能改变CSS背景图像和颜色平稳，淡入淡出效果。当按下背景图像时，应该同时淡入淡出和背景色淡入。

Answer 1

你应该做2层。您想要淡入的图层必须具有更高的Z-index（或者位于代码中其他图层下方）并且具有不透明度：0; 然后逐渐将不透明度更改为1，例如使用jQuery animate。

HTML：

<div class="box1"> 
    <div class="box2"> 
    </div> 
</div> 

CSS：

.box1 { 
    background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg); 
    width: 100px; 
    height: 100px; 
} 

.box2 { 
    height: 100px; 
    width: 100px; 
    background: #000000; 
    opacity: 0; 
} 

JS：

$('.box1').click(function(){ 
    $('.box2').animate({ 
     opacity: 1 
    }); 
}); 

见的jsfiddle： http://jsfiddle.net/Mikey/9D32K/

你也可以做

<div class="box1"></div> 
<div class="box2"></div> 

但是，那么你应该将盒子放在绝对位置。

Answer 2

您是否尝试过对元素进行分类并使用CSS3转换？

transition: background 0.5s linear;

当你改变的背景下，无论是与toggleClass或与您的代码，$('#box1').css('background-color','black');由类定义它会褪色。