jQuery閃爍文本1分鍾

Question

如何在1分鍾內設置閃爍，然后在下面的jQuery函數上取消閃爍？

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();

當前功能，它將僅閃爍1次。

我想要的是將眨眼設定為1分鍾，然后在那之后清除它。

Answer 1

閃爍插件具有停止閃爍的方法，因此您可以將其與setTimeout一起使用

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

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

演示版

 $(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> 

Answer 2

解決此問題的一種方法是使用setTimeOut() ： 更多信息

您可以將其添加到代碼中：

setTimeout(function() {

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

},60000)

60000代表60乘以1000毫秒。

一次閃爍：嘗試添加時間跨度：

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

編輯：通過StackOverflow聊天進行了一些重大調試后，我們發現代碼中還有更多問題，導致上述解決方案無法正常工作。 最后，我們解決了所有問題。 但是問題的主要答案是在上面的解決方案中。

Answer 3

您在這里不需要JS，因為可以僅在CSS中完成。 在下面的示例中，眨眼效果需要1秒鍾才能完成，並且會發生60次：

 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> 

Answer 4

您可以使用setInterval函數（ https://www.w3schools.com/jsref/met_win_setinterval.asp ）。 1分鍾后，使用clearInterval https://www.w3schools.com/jsref/met_win_clearinterval.asp