在 setTimeout 上使用淡入淡出淡入淡出？答案

【问题标题】：Using fadeIn fadeOut on setTimeout?在 setTimeout 上使用淡入淡出淡入淡出？
【发布时间】：2015-03-03 14:43:41
【问题描述】：

我可以在 setTimeout 上使用淡入或淡出吗？我在一个数组中有 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]);
});

【问题讨论】：

我不认为你可以通过 css 淡化背景。但是你可以通过使用多个相互堆叠的实际图像并改变它们的不透明度来做到这一点。
意味着什么，在图像 1（不透明度为 1）和图像 2 和图像 3（不透明度为 0）上。然后当图像 2 显示不透明度为 1 并且图像 1 和图像 3 的不透明度变为 0 时。类似的东西？

标签： jquery settimeout fadein fadeout

【解决方案1】：

请检查这个小提琴：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> 一起淡出，产生效果。

【讨论】：

好的，给我几分钟时间来试试这个。我将不得不修改我所有的 HTML，因为在我的主 div 中，我还有其他带有文本的 div，而您提供的这段代码将使用文本和 h1 标签调用我的 div。

【解决方案2】：

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

【讨论】：