JQuery在延迟后添加一个类然后延迟另一个类

Question

如何在延迟后添加类然后延迟另一个类？

我似乎只能添加一个。

$(document).ready(function() { 
    $(".websites-container").delay(5000).queue(function() { 
      $(this).addClass("active"); 
    }); 

    $(".websites-container").delay(8000).queue(function() { 
      $(this).addClass("gone") 
    }); 
}); 

Answer 1

您需要在.queue()回调中调用.dequeue()，否则队列中的以下项目永远不会执行。

$(document).ready(function() { 
 
    $(".websites-container").delay(1000).queue(function() { 
 
      // I'm impatient. I shortened the times. 
 
      $(this).addClass("active").dequeue(); 
 
    }).delay(2000).queue(function() { 
 
      $(this).addClass("gone"); 
 
    }); 
 
});

.active {font-weight: bold} 
 
.gone {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="websites-container">abc</div>

（这几乎被@adeneo解决，以将离队回调除外）。

Answer 2

最有可能的问题是你正在使用jQuery的延迟功能不正确。看看参考这太问题：.delay() and .setTimeout()

因为我们没有用动画或工作中已经存在的jQuery排队，你应该在大多数情况下使用setTimeout：

$(document).ready(function() { 
    window.setTimeout(function() { 
     $(".websites-container").addClass("active"); 
    }, 5000); 

    window.setTimeout(function() { 
     $(".websites-container").addClass("gone"); 
    }, 8000); 
});