javascript - 如何每4秒在jquery中添加和删除一个类

Question

出于某种原因，这不是每 4 秒在具有 post 类的元素上添加和删除一个新类。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仅适用于其他动画方法，不适用于addClassor removeClass。试试这个：

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

如果您希望它继续添加和删除，您需要获得更多创意。您可以使用setInterval8000 毫秒的延迟，但这也会延迟第一个addClass。另一种方法是使用嵌套的 setTimeouts 和递归函数调用（以及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 中使用delayon queued动作。幸运的是，将项目添加到队列相对简单：

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

您可以在我更新的 fiddle上看到这一点。

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