Question

所以，现在，我正在使用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!

如何写这个，这样下一个字符串只会在另一个字符串消失后显示？

Answer 1

编辑：对不起，我没看过最后一行，只有在对方褪色后才询问。改变以反映。

与大多数事情一样，有一种不止一种方法可以给猫皮肤涂抹。虽然我不确定您的整体应用，但以下内容可能会有所帮助并提供一些可扩展性/多功能性：

的.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();

正如您所看到的，您可以添加项目/幻灯片，它将循环遍历它们，而无需继续编写更多实例或代码层。基本上：一个。滑块以call＆＃39; startSlider＆＃39;开始，设置时间间隔湾changeSlide（）启动更改幻灯片的过程，在其中，它将查找下一张幻灯片并与整体幻灯片计数进行比较，如果它到达最后一张幻灯片则重置。
C。使用淡入淡出（）隐藏前一张幻灯片，延迟淡入淡出速度/时间（vl.fadeSpd），并在淡入淡出速度/时间延迟时淡入淡入淡出。

的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>

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

很抱歉，如果这对您的申请没有帮助，但也许有人会从中收集一些东西。

我怎样才能使文本在其他文本淡出后重复淡入？

1 个答案:

的.js

的CSS

主页