Question

I’ve been working on this issue for the last few hours and it has confounded my tiny brain.

What is happening is that an jQuery animate animation seems to stop during the animation, thus stopping the callback from happening.

The problem is that this happens so intermittently and randomly that i’m not able to locate the issue in my code. It appears to happen roughly 1 in 7 times. Yet it can happen the first time or after 10 times.

Im not really able to put together a jsfiddle in this case because it is linked so closely to other sections of the site. Instead i would like to leave a link here and point to the relevant section. Here is a link to the site in question. The code shown below starts on line 219. If you take a look at the firebug console you can see the logs i have made as the code runs through. You can also see that the css property left has not animated all the way to completion when the issue happens.

Below is an image showing the issue. Take note that the css left property is not at 664px (where it would be if the issue didnt happen).

Below is the relevant code.

    $(".close").live("click", function() {

        console.log("--------------------");
        console.log("Close button has been clicked");

        var toMove = $(this).parent().attr("class").replace("infoBox ", "");

        $(this)
            .parent()
            .fadeOut("fast");

        console.log("Setting #" + toMove + " back to default position");

        $("#" + toMove)
            .removeClass("active")
            .addClass("ready")
            .delay(100)
            .animate({
                left: $("#" + toMove).attr("data-left").replace("px", "")
            }, 200, function() {
                console.log("Animate has finished. Now checking all images are in the right place");
                resetAll();
                $(".close").remove();
        });
    });

Anything wrong with my question? let me know, im more than happy to amend + edit so it meets stackoverflow’s strict standards!

Related

Bug with .animate()'s callback?

Answer 1

Try to add an intermediate state to your icon. As soon as you click on the close button, the class goes from “active” to “ready”. Add “moving” for instance and don’t let any other function be called while its state is “moving”. When it has returned to its initial position, you can set the class to “ready” again.

$("#" + toMove)
        .removeClass("active")
        .addClass("moving")
        .delay(100)
        .animate({
            left: $("#" + toMove).attr("data-left").replace("px", "")
        }, 200, function() {
            console.log("Animate has finished. Now checking all images are in the right place");
            resetAll();
            $(".close").remove();
    })
        .removeClass("moving")
        .addClass("ready");