Question

191

Making text blink a certain number of times?

rated 0 times [ 195] [ 4] / answers: 1 / hits: 7906 / 10 Years ago, fri, march 7, 2014, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lamarmaximiliand

Add To Favorites

Follow

Total Points: 388

Total Questions: 104

Total Answers: 104

Location: Oman

Member since Fri, Dec 23, 2022

1 Year ago

lamarmaximiliand questions

1 I want to render the starting page based on user logged in or not on react

Fri, Mar 18, 22, 00:00, 2 Years ago

1 Swiper horizontal slide scroll navigation

Sun, Feb 6, 22, 00:00, 2 Years ago

1 Expo Background Permissions Async is not working

Thu, Jul 1, 21, 00:00, 3 Years ago

1 React Use State Hook error TypeError: setUser is not a function

Thu, May 27, 21, 00:00, 3 Years ago

1 Accessing jasmine with testRunner set to jest-circus results in: ReferenceError: jasmine is not defined

Mon, Jan 25, 21, 00:00, 3 Years ago

View All

answered 10 Years ago milo · Accepted Answer

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/