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

Question

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

我想添加一些CSS显示和隐藏效果，例如：

但是我不知道该怎么办。

你能帮我吗？

谢谢

display:flex

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;}

Answer 1

尝试以下代码：

def clear():
    t.clear()

def clear():
    t.reset()

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%; }用于计数循环计数。 clearTimeout将通过循环来完成。 <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>是要删除bounceIn动画 times是要添加bounceOut动画

要获得更快的动画效果，请使用setTimeout来增加延迟。

$('#animate').removeClass('infinite bounceIn');

$('#animate').addClass('bounceOut');

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;
})();

编辑：要添加延迟，请在div类上添加delay-.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%; }，其中x是您要延迟的秒数。别忘了还要更新超时，以便动画按预期工作。 在<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>

的摘要中进行了更新

如果要删除延迟，只需在代码段的remove类上添加x。并根据需要添加。