CODEWITHSUNDEEP
jquery
user1425500
user1425500

Reputation: 21

Need jquery blinking text to only blink for a period of 8 seconds, then stop

I need to stop flashing text after 8 seconds. Everything is working perfectly except being able to stop it after the 8 seconds. I am new to this, need help...

Here is code that I am using, please give suggestions or add to this code what I need for it to stop after 8 seconds : 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div id="msg"> <strong><font color="red">text example</font></strong></p> </div>

<script type="text/javascript" >
function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            blink(this);
        });
    });
}

blink('#msg');
</script>

Thanks

Upvotes: 2

Views: 5937

Answers (3)

Just_Mad
Just_Mad

Reputation: 4077

You can try such an addition to your code:

var stopBlinking = false;
setTimeout(function() 
{
    stopBlinking = true;
}, 8000);

function blink(selector) {
    $(selector).fadeOut('slow', function() {
        $(this).fadeIn('slow', function() {
            if (!stopBlinking)
            {
                blink(this);
            }
            else
            {
                $(this).hide();
            }
        });
    });
}

Look at the example here

Upvotes: 7

Uttara
Uttara

Reputation: 2534

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

<div id="msg"> <strong><font color="red">text example</font></strong></p> </div>

<script type="text/javascript" >
var timer = 0;

var timeSpan = setInterval(function(){
    timer++;
},1000);

function blink(selector)
{
    if(timer == 0)
        timeSpan;
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            if(timer < 8)
               blink(this);
                    else
                    {
                  clearInterval(timeSpan);
              $(this).hide();
                    }
        });
    });
}

blink('#msg');
</script>

try this out

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

function blink(selector){

  // all blink happen with 8 seconds interval

  setTimeout(function() {

   $(selector).fadeOut('slow', function(){

        $(this).fadeIn('slow', function(){

            blink(this); // recursive function will call after fadeIn finish

        });
   });

  }, 8000); // set interval to 8 seconds
}

Upvotes: 0

Related Questions