Helllo i am getting problem with blinking every 0.5 seconds. I start my code with #blink display= "inline" but it always stays inline. When starting my code, i call startBlinking.

    function startBlinking() {
    setInterval(function () { 
        blink();
    }, 1000);
}

function blink() {
    setTimeout(function () {
        document.getElementById('blink').style.display = "none";
    }, 500);
    setTimeout(function () {
        document.getElementById('blink').style.display = "inline";
    }, 500);
}

Can you help me? Thanks.

Helllo i am getting problem with blinking every 0.5 seconds. I start my code with #blink display= "inline" but it always stays inline. When starting my code, i call startBlinking.

    function startBlinking() {
    setInterval(function () { 
        blink();
    }, 1000);
}

function blink() {
    setTimeout(function () {
        document.getElementById('blink').style.display = "none";
    }, 500);
    setTimeout(function () {
        document.getElementById('blink').style.display = "inline";
    }, 500);
}

Can you help me? Thanks.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 1, 2014 at 18:33 GogoManTVGogoManTV 2511 silver badge77 bronze badges 5

• 2 There's a tag for that <blink></blink> ! – adeneo Commented Oct 1, 2014 at 18:34
• This tag is deprecated AFAIK. – GogoManTV Commented Oct 1, 2014 at 18:35
• @adeneo - I really should slap you – j08691 Commented Oct 1, 2014 at 18:36
• You can do this strictly with css as well. stackoverflow./a/16012979/2011623 – Matt R Commented Oct 1, 2014 at 18:39
• 1 @j08691 - youtube./watch?v=7O6Rm4qNILA – adeneo Commented Oct 1, 2014 at 19:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The problem with your attemt is that you're setting the same timeout length for both hiding and showing the element, meaning it will hide and show again at the same time! Remove one and it should work:

function startBlinking() {
  setInterval(function () { 
    blink();
  }, 1000);
}
function blink() {
  // note no timeout for the hiding part
  document.getElementById('blink').style.display = "none";
  setTimeout(function () {
    document.getElementById('blink').style.display = "inline";
  }, 500);
}

startBlinking();

<div id="blink">blink</div>
<p>some text following</p>

---

As you can tell, this causes the following content to jump. We are also fetching the element every time we're hiding or showing it. Better to swap to using visibility and make the function a bit more flexible:

function blink(element, time) {
  // using visibility: hidden; instead of display: none;
  // allows the element to keep its rendering space
  element.style.visibility = "hidden";
  setTimeout(function () {
    element.style.visibility = "visible";
  }, time);
  setTimeout(function () {
    blink(element, time); // recurse
  }, time * 2);
}

// query the DOM for element once instead of every iteration
blink(document.getElementById("blink"), 500);

<div id="blink">blink</div>
<p>following content stays put</p>

---

You might also want to be able to stop the blinking at some point

function blink(element, time) {
  function loop(){
    element.style.visibility = "hidden";
    setTimeout(function () {
      element.style.visibility = "visible";
    }, time);
    timer = setTimeout(function () {
      loop();
    }, time * 2);
    cleared = false;
  }

  var timer, cleared = true;

  // expose methods
  return {
    start: function() {
      if (cleared) loop();
    },
    stop: function() {
      clearTimeout(timer);
      cleared = true;
    }
  };
}

var blinking = blink(document.getElementById("blink"), 500);

document.getElementById("start").addEventListener("click", function(){
  blinking.start();
});
document.getElementById("stop").addEventListener("click", function(){
  blinking.stop();
});

<div id="blink">blink div</div>
<button id="start">start blinking</button><br />
<button id="stop">stop blinking</button>

you can make it simple by toggling a class

.hide{
   display:none;
}

setInterval(function () { 
    $('.blink').toggleClass('hide')
}, 500);

JS Fiddle

you have messed up the event que of javascript, why dont you try this

function startBlinking() {
  initial = 'inline';
  index = 0;
setInterval(function () { 
    if(index==2){
     initial = (initial=='none')?'block':'none';
    document.getElementById('blink').style.display = initial;
    index=0;
     }

index++;
}, 1000);
 }

For the jQuery fans:

you can use the 'pulsate' effect

http://jqueryui./effect/

This may or may not achieve the exact blinking you need but it's a lot simpler!