CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Julie24
Julie24

Reputation: 279

stop blinking text javascript

I have made a short script, where a text is blinking. But I cannot really figure out how I can stop the blinking after fx 3 blinks. Does anybody know how I can add that to my script?

Best Regards Julie

HTML

<div class="blink">blinking text</div>
    non-blinking
<div class="blink">more blinking text</div>

CSS:

.flash{
    background: yellow;
}

.noflash{
    background: white;
}

JS:

function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('.blink');

Upvotes: 0

Views: 1731

Answers (3)

dskoda1
dskoda1

Reputation: 109

 function blink(selector, repeat){
    if(!repeat) return;
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this, repeat - 1);
        });
    });
 }

 blink('.blink', 3);

So you can control how many times it will blink.

Upvotes: 2

Andy
Andy

Reputation: 63524

You could try something like this (untested):

function blink(selector, count){
  count = count || 1;
  if (count <= 3) {
    $(selector).fadeOut('slow', function(){
      $(this).fadeIn('slow', function(){
        blink(this, ++count);
      });
    });
  }
}

Upvotes: 1

Bob Sponge
Bob Sponge

Reputation: 4738

You can build chain of effects without recursion:

function blink(selector){
    var chain = $(selector);
    for (var i = 0; i < 3; i++) {
        chain = chain.fadeOut('slow').fadeIn('slow');
    }
}

blink('.blink');

Upvotes: 2

Related Questions