How to make this Jquery-blinking background stop after a few seconds?
Question
How to make this Jquery-blinking background stop after a few seconds? I'm trying to set the background and text to blink and then stop after 3 seconds. Thanks for your help in advance!
$(document).ready(function() { blinkFont(); }); function blinkFont() { document.getElementById("blink").style.color = "red" document.getElementById("blink").style.background = "black" setTimeout("setblinkFont()", 500) } function setblinkFont() { document.getElementById("blink").style.color = "black" document.getElementById("blink").style.background = "red" setTimeout("blinkFont()", 500) }
#blink { text-align: center; background: #000000; color: #F00; margin: 0; padding: 20px; } #blink span { font-size: 2em; font-weight: bold; display: block; }
<div id="blink"><span>This is blinking text and background</span> </div>
4 answers
solution1
1 ACCPTED 2015-01-07 05:38:52
While I could think of a few more elegant ways to do this, without changing your current structure too much , you could store the Timeouts in variables and then use clearInterval , which stops a timer, to stop the recurrences after three seconds:
<script>
var intervalA;
var intervalB;
$(document).ready(function() {
blinkFont();
setTimeout(function() {
clearInterval(intervalA); clearInterval(intervalB);},3000);
});
function blinkFont() {
document.getElementById("blink").style.color = "red"
document.getElementById("blink").style.background = "black"
intervalA = setTimeout("setblinkFont()", 500);
}
function setblinkFont() {
document.getElementById("blink").style.color = "black"
document.getElementById("blink").style.background = "red"
intervalB = setTimeout("blinkFont()", 500);
}
</script>
</head>
<body>
<div id="blink"><span>This is blinking text and background</span>
</div>
</body>
solution2
1 2015-01-07 05:57:30
You have to use SetTimeout() , SetInterval() and clearInterval() as below code.
Click Here to see working Demo
HTML
<div id="blink"><span>Demo</span>
</div>
Jquery
$(document).ready(function(){
var myVar;
myVar = setInterval(blinkFont, 500);
function blinkFont() {
var curColor = document.getElementById("blink").style.color;
var curBgC = document.getElementById("blink").style.background;
document.getElementById("blink").style.color = curColor === "red" ? "blue" : "red";
document.getElementById("blink").style.background = curBgC === "black" ? "yellow" : "black";
}
setTimeout(function () {
$("#blink").css('visibility', 'visible');
clearInterval(myVar);
}, 3000); // after 3 seconds it'll stop blinking
});
solution3
0 2015-01-07 05:37:32
Instead of SetTimeout use SetInterval, keep the variable with you. And keep a counter, which will be incremented after every execution, once you reach the desired number of repetition, stopinterval. Something like this:
myVar=setInterval("javascript function", milliseconds);
//check your counter value.
window.clearInterval(myVar)
solution4
0 2015-01-07 05:55:07
Is this fiddle satisfied you?
code :
$(document).ready(function() {
var intval;
intval = setInterval(function(){
blinkFont();
},500);
setTimeout(function() {
alert('clear');
clearInterval(intval);
}, 3000);
});
function blinkFont() {
var curColor = document.getElementById("blink").style.color;
var curBgC = document.getElementById("blink").style.background;
document.getElementById("blink").style.color = curColor === "red" ? "blue" : "red";
document.getElementById("blink").style.background = curBgC === "black" ? "yellow" : "black";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.