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中的背景图像 - 交叉淡入淡出的主要内容,如果未能解决你的问题,请参考以下文章
jQuery在悬停时更改(带有淡入淡出动画)div的背景图像
jQuery 淡入淡出图像并使用 display:none 隐藏它们