如何在jQuery中每4秒添加和删除一个类

Question

由于某种原因，这不会在每次发布类的元素上添加和删除一个新的类，每4秒一次。 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在每个时间间隔上查询的次数。

Example on jsfiddle

Answer 2

.delay只能与其他动画的方法，而不是addClass或removeClass。试试这个：

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

如果你想要它继续添加和删除，你需要获得更多的创意。您可以使用setInterval和8000毫秒的延迟，但这也会延迟第一个addClass。另一种方法是使用嵌套的下一个定时器，和一个递归函数调用（连同toggleClass缩短代码）：

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

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

（将其设定为1000毫秒，并设置.display是透明的，以及瞧 - you've just re-invented the blink tag）

Answer 3

假设你要到四秒后切换类名：

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

JS Fiddle demo。

用于切换每4秒（虽然@Mark已经发布了setInterval的选择，我加入这个回复我的帖子，同时......我要离开了，但我承认，马克得到了它在前）：

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

JS Fiddle demo。

参考文献：

• setInterval。
• setTimeout。
• toggleClass()。

Answer 4

类似的东西：

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

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

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

Answer 5

我想你想要更多的东西一样：

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

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

Answer 6

.delay()只延迟动画，而不是功能。你可以使用JavaScript的本地setTimeout方法。

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

Answer 7

只能在jQuery中queued动作中使用delay。幸运的是，将项目添加到队列相对来说比较简单：

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

提供给函数的参数是一个函数，告诉队列继续，如果你要执行异步操作，如使用$.ajax。

为了得到一个循环，只需重新排队排队功能：

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

你可以看到这个动作上my updated fiddle。