Text blinking jQuery

Question

What is an easy way to make text blinking in jQuery and a way to stop it? Must work for IE, FF and Chrome. Thanks

Answer 1

Try using this blink plugin

For Example

$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink(100); // causes a 100ms blink interval.

It is also a very simple plugin, and you could probably extend it to stop the animation and start it on demand.

Answer 2

You can also try these:

<div>some <span class="blink">text</span> are <span class="blink">blinking</span></div>
<button onclick="startBlink()">blink</button>
<button onclick="stopBlink()">no blink</button>

<script>
  function startBlink(){
    window.blinker = setInterval(function(){
     if(window.blink){
        $('.blink').css('color','blue');
        window.blink=false;
      }
     else{
      $('.blink').css('color','white');
      window.blink = true;
     }
    },500);
  }

  function stopBlink(){
    if(window.blinker) clearInterval(window.blinker);
  } 
</script>

Answer 3

You can also use the standard CSS way (no need for JQuery plugin, but compatible with all browsers):

// Start blinking
$(".myblink").css("text-decoration", "blink");

// Stop blinking
$(".myblink").css("text-decoration", "none");

W3C Link

Answer 4

$(".myblink").css("text-decoration", "blink"); do not work with IE 7 & Safari. Work well with Firefox

Answer 5

Unfortunately the text-decoration: blink is not supported by IE, Chrome & Safari

See http://www.w3schools.com/css/pr_text_text-decoration.asp

Note: The "blink" value is not supported in IE, Chrome, or Safari.