Question

我是jQuery的新手，我试图在一段时间内填补div。当时间到了，我想清除div - 非常简单，对吧？

总结：我点击一个按钮，div开始填充（使用animate({ height: "100%"}, workPeriod * 1000)超过workPeriod，这是20秒。一旦填充，我希望div被清空.div填充没有问题，然后一旦它完成它在使用animate({ height: "0%"}, workPeriod * 5000)

清除之前大约需要5-10秒

$('#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秒，我该如何立即将div清空？

顺便说一下，我对jQuery很陌生，在编程方面仍然是一个初学者，所以任何建议都会很受欢迎

Answer 1

所以，如果你想在动画完成后调用另一个函数/动画，那么这个功能已经构建到jQuery的动画函数中。

From the jQuery documentation:

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

我试图让它与上面发布的代码一起使用，但我无法让你的计时器工作。 Nevertheless, I made this codepen, to show that the animation complete function does work when your complete function is another animation.

jQuery - setInterval / clearInterval延迟

1 个答案: