CODEWITHSUNDEEP
javascriptjquery
danyo
danyo

Reputation: 5846

Blinking DIV for 5 seconds and then hide it after 1 second using jQuery

I have a <div> which I am "blinking" every 5 seconds, here is my code:

var blink = function() {
    $('.leftArrowMask').toggle();
};

$(document).ready(function() {
    setInterval(blink, 5000);   
});

I would like to change this so the blink effect happens every 5 seconds, but only blinks for say 1 second. Currently it stays visible for a 5 second duration, and then hides for 5 seconds.

I have tried the code above, but I don't think that's quite right. How can I achieve what I require?

Upvotes: 0

Views: 3703

Answers (4)

Nandhini Rathish
Nandhini Rathish

Reputation: 34

var blink = function() {
    $('div').hide();
    setTimeout(function(){$('div').show()},1000);
};

$(document).ready(function() {
    setInterval(blink, 5000);   
});
        div{
    width:100px;
    height:100px;
    background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div></div>

</body>
</html>

Upvotes: -1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Try this...

    var blink1 = function() {
    $('.leftArrowMask').hide();
    setTimeout(blink2, 5000);
};
var blink2 = function() {
    $('.leftArrowMask').show();
    setTimeout(blink1, 1000);
};
$(document).ready(function() {
    setTimeout(blink1, 1000);
});

It first runs blink1 which hides the div, and then runs blink2 after 1 second to show the div. Blink2 in turn runs blink1 again, 5 seconds later.

Upvotes: 3

Anton
Anton

Reputation: 32581

var blink = function() {
    $('.leftArrowMask').hide();
    setTimeout(function(){$('.leftArrowMask').show()},1000);

};

$(document).ready(function() {
    setInterval(blink, 5000);   
});

Working DEMO

Upvotes: 1

Hamed Khosravi
Hamed Khosravi

Reputation: 545

use setTimeOut function in ur set interval function

Upvotes: 0

Related Questions