javascript - 如何用JS设置延迟显示和隐藏

Question

我的代码在下面，我想在显示之前延迟 3 秒，当显示 3 个文本完成时，最后一个文本将在 3 秒后隐藏(不重复)。我的代码无法正常工作。

我想添加一些 CSS 显示和隐藏效果，如下所示:

但是我不知道怎么办。

你能帮帮我吗？

谢谢

var x = document.getElementById('x'),
    s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
(function loop() {
    s.length && (x.innerHTML = s.shift(), setTimeout(loop, 3000));
    return false;
})();

.speech-bubble {
	position: relative;
  padding:20px;

}

.speech-bubble:after {
content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #00aabb;
    border-right: 0;
    margin-top: 15px;
    margin-right: -10px;
}

span#x {
    color: white;
    font-family:roboto;
    padding: 20px;
    background: #00aabb;
    position: absolute;
    border-radius:5px;
    right: 0px;
    top: 50%;
}
.hideclass{display:none;}

<div class="speech-bubble"><span id="x" ></span></div>

Answer 1

试试下面的代码:

var x = document.getElementById('x');
    s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
    var times=0;
(function loop() {
    var loops=setTimeout(loop, 3000);
    if (times==3){
    clearTimeout(loops);
    $('#animate').addClass('bounceOut faster');
    }
    else{
      s.length && (x.innerHTML = s.shift(), loops);   
      setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
      $('#animate').addClass('bounceIn faster');
    }
    times++;
    return false;
})();

.speech-bubble {
	position: relative;
  padding:20px;

}

.speech-bubble:after {
content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #00aabb;
    border-right: 0;
    margin-top: 15px;
    margin-right: -10px;
}

span#x {
    color: white;
    font-family:roboto;
    padding: 20px;
    background: #00aabb;
    position: absolute;
    border-radius:5px;
    right: 0px;
    top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>

times用于计算循环次数。 clearTimeout是用循环来完成的。 $('#animate').removeClass('infinite bounceIn');就是去掉bounceIn动画 $('#animate').addClass('bounceOut');就是添加bounceOut动画

为了更快的动画，setTimeout用于添加延迟。

var x = document.getElementById('x');
    s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
    var times=0;
(function loop() {
    var loops=setTimeout(loop, 3000);
    if (times==3){
    clearTimeout(loops);
    $('#animate').addClass('bounceOut faster');
    }
    else{
      s.length && (x.innerHTML = s.shift(), loops);   
      setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
      $('#animate').addClass('bounceIn faster');
    }
    times++;
    return false;
})();

.speech-bubble {
	position: relative;
  padding:20px;

}

.speech-bubble:after {
content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #00aabb;
    border-right: 0;
    margin-top: 15px;
    margin-right: -10px;
}

span#x {
    color: white;
    font-family:roboto;
    padding: 20px;
    background: #00aabb;
    position: absolute;
    border-radius:5px;
    right: 0px;
    top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="delay-1s animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>

编辑:添加延迟去添加延迟- x s 在 div 类上，x 是你想要延迟的秒数。不要忘记也更新超时，以便动画按预期工作。在 <div class="delay-1s animated bounceIn faster speech-bubble" id="animate"> 上更新了片段

如果你想删除延迟，只需添加 delay-1s在片段中删除类。并根据需要添加。