JQuery CSS $(':animated').length delay after animation finishes on screen

Question

I am attempting to create a series of tiles in css / j query which represent buildings and the rooms within them. When you click on the building, some j query animation occurs which removes the other buildings and then shows the rooms within the building. Once in the building a "back" tile will trigger further animation to return to original set up.

Here is a jsfiddle showing this.

I have used the following snippet to prevent multiple tiles being clicked at once:

if ($(':animated').length) {
  return false;
}

However there seems to be quite a longe delay from when the animation finishes on screen to the above if statement not returning false. On the js fiddle if you click on a tile and click on back as soon as animation finishes you will see this. ( I have placed an alert inside the if statement to show that it is being caught here ).

Can any light be shed on why when the animation on screen has finished, the if statement is still returning false? Is there a better method to prevent any clicks until the animation is completed for each step?

Answer 1

I think your question/problem is related with the $building.animate function.

Check this code:
(also here)

 $building.siblings().hide(1000, function () {
    console.log('complete 1');
    $building.animate({top:"0px", left:"75px"}, 0, function () {
                                                ^
                                               here

        $building.parent().siblings(".rooms").children("."+$buildingId).show(1000);
        $building.parent().siblings(".backs").children("."+$buildingId).show(1000);
        console.log('complete 2');
    });
});

I put the time to 0 (zero). What was happening was that .siblings() found many siblings and the script was running each of the .parent() functions after the 1000 ms timeout, waiting for the last one to be complete before starting with the new sibling.

Just for debuging purpose check also here, when the timeout is still 1000ms and look att the console.log while the animation is running.