How to stop a blinking div?

Question

I'm using the below jquery way to blink my div:

JSFIDDLE

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

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

blink('.blink');

But how do we stop it from blinking? I just want it to blink for 5 times only.

Answer 1

You can achieve this with CSS alone, no need for Javascript:

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.blink {
    -webkit-animation: blinker 1s 5;
    -moz-animation: blinker 1s 5;
    animation: blinker 1s 5;
}

Updated fiddle

Note the 5 value at the end of the statement is the animation-iteration-count . You can amend this as required.

Answer 2

here is the solution,

Try This

var i = 0;

function blink(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
            i++ < 8 && blink(this);
        });

    });
}

blink('.blink');

here is the demo: Fiddle