javascript - 向背景图像过渡添加淡入淡出

Question

似乎我在这里找到的所有内容都提出了比实际需要复杂得多的东西。

我基本上只是想让它在 changeBackground 上 fadeIn("slow")...
有什么易于实现的建议吗？

jQuery( function( $ ) {
    var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
    var currentImage = 0;

    function changeBackground() {
        $( '#home' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 2600 );  
});

Answer 1

这是一个简化版本(包装器、幻灯片)与包装器、幻灯片、幻灯片方法的对比:

代码:

<script>
var images = [ "bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg" ];
var cur_image = 0;

function changeBackground() {

    cur_image++;

    if ( cur_image >= images.length )
        cur_image = 0;

    // change images
    $( '#container' ).css({
        backgroundImage: 'url(' + images[ cur_image ] + ')'
    });

    $( '#container .slide' ).fadeOut( 'slow', function(){
        $( this ).css({
            backgroundImage: 'url(' + images[ cur_image ] + ')'
        }).show();
    } );

}

setInterval( changeBackground, 2600 );
</script>

这是示例标记:

<div id="container">
    <div class="slide"></div>
    <div class="content">
        <p>This is example content.</p>
        <p>This is more content.</p>
    </div>
</div>
<style type="text/css">
#container { height: 768px; width: 1024px; background: url(bg2.jpg); }
#container .slide { height: 768px; width: 1024px; position: absolute; }
#container .content { position: absolute; top: 40px; left: 40px; padding: 1em; background: rgba(255,255,255,.5); }
</style>