Question

一直试图通过一系列图像自动旋转背景div。褪色闪烁而不是交叉。想法是使用jquery通过css交换图像并淡化新的图像。一个不错的交叉可能是好的。这是相当轻的 - 或者看起来似乎不想使用插件。

有关为何没有获得更顺畅的交叉/过渡的任何见解？

    setInterval(delayFunction, 10000);

    function delayFunction() {

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_02.jpg)").fadeIn('slow');
    },5000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_03.jpg)").fadeIn('slow');
    },10000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_04.jpg)").fadeIn('slow');
    },15000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_01.jpg)").fadeIn('slow');
    },20000);

    };

Answer 1

如果您想要一个简单的旋转示例，请查看我的jsfiddle：http://jsfiddle.net/3yN8a/2/

评论是正确的，您需要在淡出完成后调整背景图像，并通过传递第二个选项来完成此操作，该选项用作完成时的回调。

$(selector).fadeout('speed',function(){
     //execute your background switch then fade in.
});

jquery淡入淡出div中的背景图像 - 交叉淡入淡出

1 个答案: