在 setTimeout 上使用 fadeIn fadeOut？

Question

我可以在 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]);
});

Answer 1

使用jQuery函数fadeIn()，你可以在那里指定持续时间。

Answer 2

请检查这个fiddle：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 class .show 声明元素必须是不透明的。 .container div 设置了 透明的样式并有一个过渡。 当 .show 切换时， 2 <div> 一起淡出，创建效果.

在 setTimeout 上使用 fadeIn fadeOut？

Using fadeIn fadeOut on setTimeout?

jquery

settimeout

fadeout

fadein