CODEWITHSUNDEEP
javascriptjquery
WebMW
WebMW

Reputation: 524

Making text blink a certain number of times?

I'm trying to make this blinking text stop after 3 seconds (or 3-5 blinks). I've set the blink rate to about the right speed, but cannot figure out how to make it stop.

Here's the code:

$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
    } else {
        elem.css('visibility', 'hidden');
    }    
}, 200);
});

Any suggestions?

I've compiled a jQuery fiddle here: http://jsfiddle.net/M4Fcd/173/

Upvotes: 5

Views: 8580

Answers (7)

Nicolas Facciolo
Nicolas Facciolo

Reputation: 306

Vanilla js and short response:

  blinker(blinking_text)
  {
    let count = 0;
    const intervalId = setInterval(function() {
      blinking_text.style.visibility = (blinking_text.style.visibility === "hidden" ? "visible" : "hidden");
      if (count++ === 3) {
        clearInterval(intervalId);
      }
    }, 200);
  }

Upvotes: 1

aRIEL
aRIEL

Reputation: 197

I think I have the shortest answer.

function blinkElement(elm, interval, duration) {

    elm.style.visibility = (elm.style.visibility === "hidden" ? "visible" : "hidden");

    if (duration > 0) {
        setTimeout(blinkElement, interval, elm, interval, duration - interval);
    } else {
        elm.style.visibility = "visible";
    }
}

To blink for 3 seconds in the rate of 200 milliseconds.

blinkElement(element, 200, 3000);

Upvotes: 4

Matt Pileggi
Matt Pileggi

Reputation: 7196

setInterval goes on indefinitely - or until stopped.

What you need to do is capture the intervalID when you create the interval and then clear the interval after you are done with it

var intervalID = setInterval(function....);

// when done
clearInterval(intervalID);

In your particular case:

$('.blink').each(function() {
  var elem = $(this);
  // count the blinks
  var count = 1;
  var intervalId = setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
        // increment counter when showing to count # of blinks and stop when visible
        if (count++ === 3) {
            clearInterval(intervalId);
        }
    } else {
        elem.css('visibility', 'hidden');
    }    
  }, 200);
});

Updated fiddle http://jsfiddle.net/M4Fcd/186/

Upvotes: 8

f1ames
f1ames

Reputation: 1734

Ok, there is better way. You can just toggle css class with visibility: hidden, the code gets simpler and than if you want to stop when visible/not visible just need to check with hasClass.

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000,
        intervalId = setInterval(function() {
            elem.toggleClass('blink');
            if(timer > stopAfter && !elem.hasClass('blink')) {
                clearInterval(intervalId);
            }
            timer += interval;
        }, interval);
});

fiddle: http://jsfiddle.net/M4Fcd/183/

Now you can stop it when it's visible or not, but the idea is pretty the same.

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000;
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
            if(timer > stopAfter) {
                clearInterval(refreshIntervalId);
            }
        } else {
            elem.css('visibility', 'hidden');
        }
        timer += interval;
    }, interval);
});

fiddle: http://jsfiddle.net/M4Fcd/180/

Upvotes: 1

Jai
Jai

Reputation: 74738

try this:

var i = 0;
var blink;
$('.blink').each(function() {
  var elem = $(this);
  blink = setInterval(function() {
      if (elem.css('visibility') == 'hidden') {
          elem.css('visibility', 'visible');
          i++;
          if(i >= 3){
              clearInterval(blink);
          }
      } else {
        elem.css('visibility', 'hidden');
      }    
   }, 200);
});

Fiddle

Upvotes: 1

RobinvdA
RobinvdA

Reputation: 1363

You could also use fadeIn/fadeOut like this

$('.blink').each(function() {
    var elem = $(this);
    elem.fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100);
});

jsFiddle

Upvotes: 6

AO_
AO_

Reputation: 2874

$('.blink').each(function() {
    var elem = $(this);
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 200);
});


setTimeout(function(){
    clearInterval(refreshIntervalId);
}, 3000)

fiddle: http://jsfiddle.net/M4Fcd/176/

Upvotes: 3

Related Questions