How to set delay show and hide with JS

Question

I have my code in below, I want to delay 3 seconds before the show in and when showing 3 texts is done, the last text will hide after 3 seconds (not repeat). My code not working as I want.

And I want to add some CSS show and hide effect like this:

But I don't know how I can do it.

Can you help me?

Thanks

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>

It may be helpful to you https://stackoverflow.com/questions/16945789/using-settimeout-to-delay-timing-of-jquery-actions — Parveen Suyan, Nov 16 '18 at 06:22

Mukyuu · Accepted Answer · 2018-11-17T01:20:27.120

Try the following code:

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 is used to count the loop count. clearTimeout is to be done with loop. $('#animate').removeClass('infinite bounceIn'); is to remove bounceIn animation $('#animate').addClass('bounceOut'); is to add bounceOut animation

For faster animation, setTimeout is used to add delay.

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>

Edit: for adding delay go add delay-xs on div class with x as the number of seconds you would like to delay. Don't forget to also update the timeout so that the animation work as intended. Updated in snippet on <div class="delay-1s animated bounceIn faster speech-bubble" id="animate">

If you want to remove the delay just add the delay-1s on remove class in snippet. And add as needed.

When i change Css "Slower" to "Fast" or change time to 3000 -> 5000 the effect not working right way. How i can change speed animation or time but not affect the effect — Tri Hoang, Nov 16 '18 at 05:36
Haha, it's work but i dont know why the review in this post look better on my site =)) — Tri Hoang, Nov 16 '18 at 07:14
beware of var x = document.getElementById('x'), Updated to ; — Mukyuu, Nov 16 '18 at 07:25
Oh, thank you very much :). Ah. I Want to "the text" delay a time (.. seconds) before it showing. How can I do it ? — Tri Hoang, Nov 16 '18 at 08:15
Thank you but it's not my idea, I mean. First, delay ...seconds, second show "Hello" then show "What can I help you" then "Click me to get some help!", third "Hide all text". — Tri Hoang, Nov 16 '18 at 15:26
@TriHoang okay. I've updated the snippet. with the top one being the updated answer and the bottom being updated with delay. — Mukyuu, Nov 17 '18 at 01:21

How to set delay show and hide with JS

1 Answers1