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