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

Posted 2023-05-08

【中文标题】jquery淡入淡出div中的背景图像 - 交叉淡入淡出

【英文标题】：jquery fade in and out a background image in div - with cross fade

【发布时间】：2013-10-01 19:05:51

【问题描述】：

一直在尝试让背景 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);

    ;

【问题讨论】：

你需要在淡出完成后更改背景图片，不是吗？

新背景图片的应用和fadIN功能无关，你要找的是把两张图片叠加在一起，同时调整每张图片的alpha通道。我现在正在打电话，但如果明天没有人接听，我会调查一下。

【参考方案1】：

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

cmets 是正确的，您需要在淡出完成后调整背景图像，您可以通过传递第二个选项来实现，该选项用作完成时的回调。

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