jQuery淡出css背景图像和颜色

Question

以下是示例：http://jsfiddle.net/Zg55k/

如何使用淡入淡出效果平滑地更改css背景图像和颜色。当按背景图像应该同时fadeOut和背景颜色淡入。

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');，它都会根据类的定义进行淡出。