JQuery CSS $ (':animated' ).动画在屏幕上完成后的长度延迟

Question

我正在尝试在 css/j 查询中创建一系列图 block ，这些图 block 表示建筑物及其中的房间。当你点击建筑物时，会出现一些 j 查询动画，它会移除其他建筑物，然后显示建筑物内的房间。一旦进入建筑物，“后退”瓷砖将触发进一步的动画以返回到原始设置。

这是一个jsfiddle显示这个。

我使用以下代码片段来防止一次点击多个图 block :

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

然而，从动画在屏幕上结束到上面的 if 语句不返回 false 似乎有相当长的延迟。在 js fiddle 上，如果您单击一个图 block 并在动画结束后立即单击返回，您将看到它。 (我在 if 语句中放置了一个警报，以表明它正在此处被捕获)。

能否说明为什么当屏幕上的动画结束时，if 语句仍然返回 false？在每个步骤的动画完成之前，是否有更好的方法来防止任何点击？

Answer 1

我认为您的问题与 $building.animate 函数有关。

检查这段代码:
(还有 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');
    });
});

我把时间归为0(零)。发生的事情是 .siblings() 发现了许多 sibling ，脚本在 1000 毫秒超时后运行每个 .parent() 函数，等待最后一个在开始新的 sibling 之前完成。

仅用于调试目的也检查 here ，当超时仍为 1000ms 时，在动画运行时查看 console.log。