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

我试图使其与上面发布的代码一起使用，但无法使您的计时器工作。 不过，我制作了该代码笔，以说明当您的完整功能是另一个动画时，动画完整功能确实可以工作。