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

Posted

技术标签:

【中文标题】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.
);

【讨论】:

以上是关于jquery淡入淡出div中的背景图像 - 交叉淡入淡出的主要内容,如果未能解决你的问题,请参考以下文章

在循环中更改 div 元素的背景颜色交叉淡入淡出

jQuery在悬停时更改(带有淡入淡出动画)div的背景图像

jQuery 淡入淡出图像并使用 display:none 隐藏它们

角度6背景图像交叉淡入淡出动画

使用 jQuery 动画制作具有 200 毫秒交叉淡入淡出的 img 切换源?

looper.js 插件 - 交叉淡入淡出动画之间不可见的图像