CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tri Hoang
Tri Hoang

Reputation: 13

How to set delay show and hide with JS

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: enter image description here

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>

Upvotes: 1

Views: 376

Answers (1)

Mukyuu
Mukyuu

Reputation: 6779

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.

Upvotes: 2

Related Questions