jQuery淡出css背景图像和颜色答案

【问题标题】：jQuery fade css background image and colorjQuery淡出css背景图像和颜色
【发布时间】：2012-03-22 16:57:18
【问题描述】：

如何使用渐变效果平滑地更改 css 背景图像和颜色。当按下 background-image 时，应该同时 fadeOut 和 background-color fadeIn。

【问题讨论】：

标签： jquery

【解决方案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>

但是你应该绝对定位这些框。

【讨论】：

【解决方案2】：

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

transition: background 0.5s linear;

当您使用 toggleClass 或您的代码更改背景时，$('#box1').css('background-color','black'); 它会按照类的定义淡出。

【讨论】：