Correct syntax for jQuery animate "complete" callback

Question

I have to use a callback function when a jQuery animation is complete. I've always did that like this:

.animate({ properties }, duration, function() { /* callback */ });

However, when asking a question here I've been proposed a solution with a different syntax.

$('#redirectNoticeContainer').animate({ properties }, { queue: false, duration: 123 });

where am I supposed to put the callback function there? This is my guess, but it is not working.

$('#redirectNoticeContainer').animate({ properties }, { queue: false, duration: 123 }, function () {
console.log("ok");
setTimeout(function () { window.location.replace("/Account/Login"); }, 1200);
});

The animation works. Callback doesn't. Where should I put it?

http://api.jquery.com/animate/ – Tushar Gupta - curioustushar Aug 22 '13 at 07:39 — Tushar Gupta - curioustushar, Aug 22 '13 at 07:39

score 14 · Accepted Answer · answered Aug 22 '13 at 07:41

That form of animate() takes a complete option:

$("#redirectNoticeContainer").animate({
    // properties...
}, {
    queue: false,
    duration: 123,
    complete: function() {
        console.log("ok");
        setTimeout(function() {
            window.location.replace("/Account/Login");
        }, 1200);
    }
});

score 8 · Answer 2 · edited May 23 '17 at 11:45

8

You can also use 'promises' since jquery 1.6

$('.play-button').animate({ opacity: 0 }).promise().done(function ()
{
     $('.video').addClass('playing');
});

See also How to get jQuery to wait until an effect is finished?

edited May 23 '17 at 11:45

Community

1
1

answered May 11 '14 at 01:25

Simon_Weaver

140,023
84
646
689

Correct syntax for jQuery animate "complete" callback

2 Answers2