我可以在setTimeout上使用fadeIn或fadeOut吗?我在阵列中有3个背景图像,我想慢慢淡化每个图像。
这是我的代码工作正常,我希望过渡到现在是缓慢而不是超快。
$(function () {
var nextImage = $('.main-background');
var backgrounds = [
'url(<?= $image_url ?>/big-main-background-1.jpg)',
'url(<?= $image_url ?>/big-main-background-2.jpg)',
'url(<?= $image_url ?>/big-main-background-3.jpg)'];
var current = 0;
function nextBackground() {
nextImage.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 4000);
}
setTimeout(nextBackground, 4000);
nextImage.css('background', backgrounds[0]);
});
答案 0 :(得分:2)
请检查这个小提琴:https://jsfiddle.net/3xdzxpmh/1/
这是一种不同的方法,您可以随意询问您是否有任何问题。
只需将风格或内容替换为您的背景。
如果要将其应用于容器,请将以下结构插入主容器中,并最大化其宽度和高度。
这是结构:
<div class="container">
<div style="background:red"></div>
<div style="background:yellow"></div>
<div style="background:blue"></div>
</div>
这是我从你的代码中修改过的JS:
var current = 0;
$(function(){
var l = $(".container div").length;
change();
function change() {
current = ++current % l;
$(".container div").removeClass("show");
$(".container div:nth-child("+(current+1)+")").addClass("show");
setTimeout(change,2000);
}
});
这是CSS:
.container {
position:relative;
}
.container > div {
width:200px;
height:200px;
top:0;
left:0;
position:absolute;
opacity:0;
transition:1s all ease;
}
.container > div.show {
opacity:1;
}
基本上,CSS类.show
表明该元素必须是不透明的。 .container div
设置透明且具有转换的样式。切换.show
时, 2 <div>
一起淡入,创建效果
答案 1 :(得分:0)
使用jQuery函数fadeIn(),您可以在那里指定持续时间。