how can I animate an element and don't continue till it finished?

Question

I just want to animate element during a game of cards, but the problem is that when I use the animate function the code is continue to run. I tried with the promise() and done() function, but for some reason it doesn't help.

Here is what I did:

$(document).ready( function() {

    $(".demoCard").animate({
        "margin-top": '-150'
    }, 1000, "easeInSine", function() {
        $(".demoCard").remove();
    });
});

Answer 1

According to the api documentation. Your callback is correct. Try updating your jQuery api. Maybe you are using an outdated version. If that doesn't work, try removing your easing argument. JQuery might be trying to use the easing argument as a callback function. If you need your easing, make sure you have jQuery UI installed and loaded. Otherwise, jQuery won't recognize the easing, and try to use easeInOutSine as the callback function.