如何每4秒在jquery中添加和刪除class

Question

出於某種原因，這不是每 4 秒在帶有 class 的元素上添加和刪除新的 class。 jquery 正確加載，就像這樣。 chrome 顯示代碼沒有錯誤。

$(document).ready(function(){
    $('.post').addClass('display').delay(4000).removeClass('display');
});

Answer 1

由於您列出了您希望每 4 秒發生一次，您可以簡單地使用setInterval()

var $post = $(".post");
setInterval(function(){
    $post.toggleClass("display");
}, 4000);

請注意，選擇器緩存在$post中，以最大限度地減少 DOM 在每個時間間隔內需要查詢的次數。

jsfiddle 上的例子

Answer 2

假設您想在四秒后切換類名：

setTimeout(function(){
   $('.post').toggleClass('display');
},4000);

JS 小提琴演示。

每四秒切換一次（雖然@Mark在我將其添加到我的帖子時已經發布了一個setInterval選項。......我要離開它，但我承認馬克首先得到它）：

setInterval(function(){
   $('.post').toggleClass('display');
},4000);

JS 小提琴演示。

參考：

• setInterval 。
• setTimeout 。
• toggleClass() 。

Answer 3

.delay僅適用於其他動畫方法，不適用於addClass或removeClass 。 試試這個：

$('.post').addClass('display');
setTimeout(function(){ $('.post').removeClass('display'); },4000);

如果你想讓它繼續添加和刪除，你需要更有創意。 您可以使用setInterval和 8000 毫秒的延遲，但這也會延遲第一個addClass 。 另一種方法是使用嵌套的 setTimeouts 和遞歸 function 調用（連同toggleClass以縮短代碼）：

function addRemoveClass() {
    var delay = 4000; // milliseconds
    setTimeout(function() {
        $('.post').toggleClass('display');
        addRemoveClass();
    }, delay);
};
addRemoveClass();

http://jsfiddle.net/mblase75/jU8cj/

（將它設置為 1000 毫秒並將.display設置為透明，瞧——你剛剛重新發明了blink標簽。）

Answer 4

我想你想要更像的東西：

$(document).ready(function(){  
  setInterval(addRemoveClass,4000); 
});

function addRemoveClass() {
   $('.post').toggleClass('display');
}

Answer 5

您只能在 jQuery 中使用delay on queue d操作。幸運的是，將項目添加到隊列相對簡單：

$(selector).delay(duration).queue(function (next) {
    $(this).doStuff();
    doOtherStuff();
    next();
});

提供給 function 的參數是 function 以告訴隊列繼續，以防您要執行異步操作，例如使用$.ajax 。

要獲得循環，只需重新排隊排隊的 function：

jQuery(function ($) {
    "use strict";
    function toggleDisplayClass(next) {
        $(this).toggleClass('display')  //toggles the class
            .delay(4000)                //waits 4 seconds
            .queue(toggleDisplayClass); //requeued
        next();                         //continues on the queue
    }
    $('.post').queue(toggleDisplayClass);
});

您可以在我更新的小提琴上看到這一點。

Answer 6

像這樣的東西：

jQuery(document).ready(function($) {  // ready
        var refresh=function(){

        $('.post').toggleClass('display'); //switch

                 }//end refresh
    setInterval(refresh,4000);
});

Answer 7

.delay()只延遲動畫，不延遲函數。 您可以使用 JavaScript 的本機setTimeout方法。

function toggleDisplay() {
    $('.post').toggleClass("display");
    setTimeout(function(){ toggleDisplay(); },'1000');
}
toggleDisplay();