jquery .animate（）和.done（） [英] jquery .animate() and .done()

问题描述

我正在尝试在动画完成后启动一个函数，但我无法使它工作。

I'm trying to fire up a function after the animation has finished but i can't make it work.

这是我的代码：

var count = 3;
var timer = setInterval(function () {
    handleTimer(count);
}, 1000);

function endCountdown() {
    $('.begin-btn').html("GO!");
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        $('.begin-btn').html(count);
        count--;
    }
}


$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow").promise().done(function (handleTimer) {});

我试过并且：

    $('.begin-mrsuper').delay(500).animate({"left":"4px"}, "slow").promise().done(function(){ handleTimer(); });

但是3,2,1，GO计时器在动画结束之前启动，有什么想法？

But the 3,2,1, GO timer starts before the animation finishes, any ideas?

推荐答案

将 setInterval 部分包装到一个函数中，否则它将被执行一次你打电话给它。

Wrap the setInterval part into a function, or it will be executed once you called it.

var count = 3, timer = null;
var foo = function() {
    timer = setInterval(function () {
        handleTimer(count);
    }, 1000);
};

function endCountdown() {
    $('.begin-btn').html("GO!");
}

function handleTimer() {
    if (count === 0) {
        clearInterval(timer);
        endCountdown();
    } else {
        $('.begin-btn').html(count);
        count--;
    }
}


$('.begin-mrsuper').delay(500).animate({
    "left": "4px"
}, "slow").promise().done(foo);

这篇关于jquery .animate（）和.done（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！