Blinking text cross browser
Question
I want to make a blinking text.
First I tried the <blink> HTML tag, but it is only supported in Mozilla Firefox.
Then I tried CSS:
<style>
.blink {text-decoration: blink; }
</style>
It's not working on IE 6.
Then I tried javascript:
<script type="text/javascript">
function doBlink() {
// Blink, Blink, Blink...
var blink = document.all.tags("BLINK")
for (var i=0; i < blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",500)
}
window.onload = startBlink;
</script>
Now it's not working on Safari or Chrome.
Can anybody help me use blinking text which will run on all the different popular browsers? (IE 6, Mozilla Firefox, Google Chrome Safari, Opera.)
11 answers
solution1
40 ACCPTED 2011-11-29 21:46:33
This can be achieved with CSS3 like so
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
It even has a nice fade effect. Works fine in Safari, but Chrome cries a little on the inside.
solution2
11 2013-06-20 00:41:11
The truly cross browser / legacy browser blink tag...
HTML
<!DOCTYPE html>
<html>
<blink>ULTIMATE BLINK TAG!</blink>
<!--[if lt IE 10]>
<script>
toggleItem = function(){
var el = document.getElementsByTagName('blink')[0];
if (el.style.display === 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
setInterval(toggleItem, 1000);
</script>
<![endif]-->
</html>
CSS
blink {
-webkit-animation: blink 1s steps(5, start) infinite;
-moz-animation: blink 1s steps(5, start) infinite;
-o-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
}
@-webkit-keyframes blink {
to { visibility: hidden; }
}
@-moz-keyframes blink {
to { visibility: hidden; }
}
@-o-keyframes blink {
to { visibility: hidden; }
}
@keyframes blink {
to { visibility: hidden; }
}
solution3
5 2013-08-11 22:32:15
var el = $(".blink");
setInterval(function() {el.toggle()}, 500);
solution4
2 2013-08-09 12:07:04
Simple jquery implementation, feel free to extend to fit your needs http://jsfiddle.net/L69yj/
var element = $(".blink");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
solution5
1 2013-09-03 15:18:10
Works in IE 10, Firefox 23.0.1, Google Chrome 29.0, Opera 16.0
blink(0.7);
function blink(speed) {
if (speed) {
if (document.getElementsByTagName('blink'))
setInterval("blink()", speed*2000);
return;
}
var blink = document.getElementsByTagName('blink');
for (var i=0; i<blink.length; i++) {
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : "";
}
}
solution6
1 2014-07-04 11:09:41
<p id="blink">My name is Ankurji1989</p>
<script type="text/javascript">
var blink_line = document.getElementById("blink");
function d_block(){
if(blink_line.style.visibility=='hidden')
{
blink_line.style.visibility='visible';
}
else{
blink_line.style.visibility='hidden';
}
}
setInterval(function(){d_block();}, 1000);
</script>
solution7
1 2015-01-07 06:08:00
It is working smoothly in all the browsers...Please try it it will work
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">Blinking Text</div>
</body>
solution8
1 2011-02-04 05:12:00
Try this jQuery
function blinks(hide) {
if (hide === 1) {
$('.blink').show();
hide = 0;
}
else {
$('.blink').hide();
hide = 1;
}
setTimeout("blinks("+hide+")", 400);
}
$(document).ready(function(){
blinks(1);
});
Note : include the jquery file and give a class name 'blink' on element which you want to blink.
Tip: .show() and .hide() doesn't not reserve the width and height of the element... If you need to hide the element, but not his place (dimentions) at the document, use .css("visibility", "hidden or visible") instead.
solution9
0 2015-05-07 18:07:38
This works great:
<script type="text/javascript">
function blinker()
{
if(document.querySelector("blink"))
{
var d = document.querySelector("blink") ;
d.style.visibility= (d.style.visibility=='hidden'?'visible':'hidden');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<blink>Blinking Text</blink>
</body>
It looks really like the old version, plus it is used the same too.
solution10
0 2017-02-21 03:30:33
This is not my code, but it works well in our web site. Only problem is that It works if included in the html but not when referenced as a seperate script.
<style>
#blinker { color: #58bf7a }
#blinker.on { color: #58d878 }
</style>
<script>
var blinker;
function blink() {
blinker.className = blinker.className ? "" : "on";
}
window.onload = function() {
blinker = document.getElementById("blinker");
var interval_id = setInterval(blink, 1000);
}
</script>
solution11
0 2011-02-26 04:37:09
You can also use this:
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags('blink').length;i++){
s=document.all.tags('blink')[i];
s.style.visibility=(s.style.visibility=='visible') ?'hidden':'visible';
}
}
}
You may use a timer instead of using the tag. I have tested this on IE7 and Firefox. Both browsers allow this, however Chrome doesn't work properly. Hope you got the answer.
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.