javascript - 如何使文本仅在其他文本淡出后才重复出现？

因此，现在，我正在使用JQuery尝试连续播放文本值的幻灯片。但是，一段时间后，同时开始显示多个画面，这表明我的计时已关闭。我试图隐藏它们，但是它仍然无法按照显示的方式工作。我的代码当前看起来像这样。我有3串文字。

<h3 class="s1" style="display:none;"> ONE! </h3>
<h3 class="s2" style="display:none;"> TWO! </h3>
<h3 class="s3" style="display:none;"> THREE! </h3>

我的函数如下所示：

setInterval(function(){
    $(".s1").fadeIn(1000);
    $(".s1").fadeOut(1000,function(){
        $(".s2").fadeIn(1000);
        $(".s2").fadeOut(1000,function(){
            $(".s3").fadeIn(1000);
            $(".s3").fadeOut(1000);
        });
    });
},6000);

从一开始看来，这种方法就可以很好地工作，但是几秒钟后（可能是30或更长时间），字符串开始相互堆叠。所以，我想要的输出就像：

0:01 --> ONE!
0:02 -->
0:03 --> TWO!
0:04 -->
0:05 --> THREE!
0:06 -->
0:07 --> ONE!

但是，我得到的是这样的：

0:01 --> ONE!
0:02 -->
0:03 --> TWO!
0:04 -->
0:05 --> THREE!
         ONE!
0:06 -->
0:07 --> TWO!
         ONE!
...  --> ONE!
...  --> TWO!
...  --> THREE!

我该如何写，以便下一个字符串仅在另一个消失后才显示？

最佳答案

编辑：对不起，我没有读最后一行，您只在另一行消失后才问到。更改以反映。

与大多数事情一样，“有多种方法可以给猫剥皮”。尽管我不确定您的总体应用程序，但是以下内容可能会有所帮助并提供一些可伸缩性/多功能性：

.js

var vl = [];

vl.interval = 1000;
vl.fadeSpd = 300;
vl.slide = $('.slider .slide');
vl.cntSlides = vl.slide.length;

function startSlider() {
    setInterval( function() {
        changeSlide();
    },vl.interval);
}

function getNextSlide() {
    active = $('.slider .active').index();
    if(active == (vl.cntSlides - 1)) {
        nextSlide = 0;
    } else {
        nextSlide = active + 1;
    }
    return nextSlide;
}

function changeSlide() {
    nextSlide = getNextSlide();
    $('.slider .active').fadeOut(vl.fadeSpd).removeClass('active');
    setTimeout( function() {
        vl.slide.eq(nextSlide).fadeIn(vl.fadeSpd).addClass('active');
    },vl.fadeSpd);
}


startSlider();

如您所见，您可以添加项目/幻灯片，它会在它们之间循环，而无需继续编写更多实例或代码层。基本上：
一种。滑块以调用“ startSlider”开始，设置时间间隔
b。 changeSlide（）开始更改幻灯片的过程，在该过程中，它将查找下一张幻灯片并与总的幻灯片计数进行比较，如果到达最后一张幻灯片则将其重置。
C。使用fadge（）隐藏先前的幻灯片，在渐变速度/时间上延迟（vl.fadeSpd），在nextSlide中渐变在速度/时间上延迟。

.css

.slider {
    position: relative;
    text-align: center;
    width: 300px;
.slide {
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
}
.active {
    display: block;
}

不确定是否需要解释，但是基本上将每个项目放在另一个项目的顶部，因此为什么必须使用某种“相对”容器（例如，滑块）。您可以更改容器，但在此示例中使用了300px的宽度。您可以在这个基础上做更多的事情。玩得开心！ :)

主页

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
    <h3 class="slide active">One!</h3>
    <h3 class="slide">Two!</h3>
    <h3 class="slide">Three!</h3>
</div>

刚刚添加了容器，因此绝对的堆叠项目/幻灯片具有某种相对位置/参数。

抱歉，如果这对您的应用程序没有帮助，但是也许有人会从中收集一些信息。