How to set delay show and hide with JS
1
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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>javascript jquery html css
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
add a comment |
1
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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>javascript jquery html css
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22
add a comment |
1
1
1
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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>javascript jquery html css
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>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%;
.hideclassdisplay:none;<div class="speech-bubble"><span id="x" ></span></div>javascript jquery html css
javascript jquery html css
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
edited Nov 16 '18 at 4:53
Mukyuu
1,70831123
1,70831123
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
asked Nov 16 '18 at 2:01
Tri HoangTri Hoang
84
84
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22
add a comment |
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22
add a comment |
1 Answer
1
active
oldest
votes
2
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.
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330427%2fhow-to-set-delay-show-and-hide-with-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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.
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
|
show 3 more comments
2
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.
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
|
show 3 more comments
2
2
2
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.
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
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.
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>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>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>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>answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
edited Nov 17 '18 at 1:20
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
answered Nov 16 '18 at 2:48
MukyuuMukyuu
1,70831123
1,70831123
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
|
show 3 more comments
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
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 5:36
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 5:36
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
@TriHoang can you recheck? the faster animation edit
– Mukyuu
Nov 16 '18 at 6:17
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 7:14
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 7:14
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7:25
beware of var x = document.getElementById('x'), Updated to ;
– Mukyuu
Nov 16 '18 at 7: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 8:15
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 8:15
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330427%2fhow-to-set-delay-show-and-hide-with-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It may be helpful to you stackoverflow.com/questions/16945789/…
– Parveen Suyan
Nov 16 '18 at 6:22