javascript - 使用淡入淡出效果更改背景图像的最佳方法是什么？

Question

     #compareDiv{
    position: fixed; 
    bottom: 0px; 
    right: 220px; 
    background:url(images/compare-V1.png) top left no-repeat; 
    width:80px;
    height:16px; 
    padding:2px 6px;  
    color:#FFF; 
    font-size:12px; 
    font-weight:bold; 
    cursor:pointer;
    }
    #compareDiv:hover{
    background:url(images/compare-V1.png) bottom left no-repeat;
    }

这是我的代码，我需要的是在它正常悬停时使用 css 更改此快速效果并提供缓慢的效果更改。 有什么想法吗？

Answer 1

您需要使用图像标签而不是 CSS 背景属性。您可以通过将图像标签设置为 z-index:0

使图像标签充当背景图像

CSS

    body, html{
        margin:0;
        padding:0;
        background:black;
    }
    img{
        position:absolute;
        top:0;
        display:none;
        width:100%;
        height:100%;
    }

HTML

<img src="http://...1.jpg" />
<img src="http://...2.jpg" />
<img src="http://...3.jpg" />

jQuery

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
}
test();

在 http://jsfiddle.net/RyGKV/ 查看工作示例