jQuery-setInterval / clearInterval延遲

Question

我是jQuery的新手，正在嘗試在一定時間內填充div。 時間到了，我想清除div-非常簡單，對吧？

摘要：我單擊一個按鈕，然后div開始填充（使用animate({ height: "100%"}, workPeriod * 1000)超過workPeriod，即20秒。一旦填充，我希望div清空。問題，一旦完成，大約需要5到10秒鍾，然后使用animate({ height: "0%"}, workPeriod * 5000)

$('#begin').click(function () {
    var workPeriod = 20
    var start = new Date($.now());
    var end = new Date(start.getTime() + 1000 * workPeriod);

    var workInterval = setInterval(function () {
        var currentDif = Math.floor((new Date($.now()) - end) / 1000) * -1;
        if (currentDif < 0) {
            $('#session-time').animate({
                height: '0%'
            }, 0);
            clearInterval(workInterval);
            //I want the animation above to occur instantly but it's happening several seconds after
            //the clearInterval call
        } else {
            $('#session-time').animate({
                height: '100%'
            }, workPeriod * 1000);
        }
    }, 1000);

問題：一旦div填滿，如何立即將其清空，而不是等待5到10秒鍾？

順便說一句，我是jQuery的新手，還是編程的初學者，因此任何建議都將受到歡迎

Answer 1

因此，如果您希望在動畫完成后調用另一個函數/動畫，則該功能已經內置在jQuery的動畫函數中。

從jQuery文檔中：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

我試圖使其與上面發布的代碼一起使用，但無法使您的計時器工作。 不過，我制作了該代碼筆，以說明當您的完整功能是另一個動畫時，動畫完整功能確實可以工作。