CODEWITHSUNDEEP
javascriptjquery
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery blink text for 1 minutes

How to set blink in 1 minutes and then after that unset the blink on my jQuery function below?

var html = '<table>';
for(var i in list)
{
    var tClass = list[i];

    if(jsonStr.currentTime == times[list[i].toLowerCase()]+":00")
    {
        $("#audio").html('<audio style="width: 100%;" class="audioDemo" controls preload="none" controlsList="nodownload"><source src="assets/audio/alarm2.mp3" type="audio/mpeg"></audio>');
        $(".audioDemo").trigger("play");

        tClass += " blinker";
    }

    html += '<td class="box"><span class="'+ tClass+'">'+ list[i]+'<div class="timeValue">'+ times[list[i].toLowerCase()]+'</div></span></td>';
}
html += '</table>';
document.getElementById('todayPrayTime').innerHTML = html;

$('.blinker').blink();

The current function, it will blink only 1 time.

What I want is the blink is set for 1 minute and then clear it after that.

Upvotes: 1

Views: 1879

Answers (4)

Jordumus
Jordumus

Reputation: 2783

One way of solving this, is by using setTimeOut(): more info

In your case, you could add this to your code:

setTimeout(function() {

$(".blinker").unblink();

},60000)

The 60000 stands for 60 times 1000 milliseconds.

For the one time blinking: try adding a timespan:

$(".blinker").blink(500);

Edit: After some major debugging via StackOverflow chat, we found that there were some more issues with the code, preventing the solution above to work. In the end we solved it all. But the main answer for the question is in the solution above.

Upvotes: 2

gurvinder372
gurvinder372

Reputation: 68393

Blink plugin has the method to stop blinking so you can use this along with setTimeout

$('.blinker').blink();

setTimeout( function(){
   $('.blinker').unblink();
}, 60*1000);

Demo

$(document).ready(function() {
  $('.blinker').blink();

  setTimeout(function() {
    $('.blinker').unblink();
  }, 60 * 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://johnboker.github.io/jquery.blink.js"></script>
<div class="blinker">This line will blink</div>
<div class="noblinker">This line won't blink</div>

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

You don't need JS here, as this can be done in CSS alone. In the example below the blink effect takes 1 second to complete, and will occur 60 times:

span {
  opacity: 0;
  animation: blinking 1s linear 60;
}

@keyframes blinking {
  from, 49.9% { opacity: 0; }
  50%, to { opacity: 1; }
}
<span>Blink for 1 min...</span>

Upvotes: 1

Sylwek
Sylwek

Reputation: 866

You can use setInterval function ( https://www.w3schools.com/jsref/met_win_setinterval.asp ). After 1 minute use clearInterval https://www.w3schools.com/jsref/met_win_clearinterval.asp

Upvotes: 0

Related Questions