11

我正在尝试在 css / j 查询中创建一系列图块，它们代表建筑物和其中的房间。当您单击建筑物时，会出现一些 j 查询动画，该动画会删除其他建筑物，然后显示建筑物内的房间。一旦进入建筑物，“返回”图块将触发进一步的动画以返回原始设置。

这是一个显示这一点的jsfiddle。

我使用以下代码段来防止一次单击多个图块：

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

然而，从动画在屏幕上结束到上面的 if 语句没有返回 false 似乎有相当长的延迟。在 js 小提琴上，如果您单击一个图块并在动画完成后立即单击返回，您将看到这一点。（我在 if 语句中放置了一个警报，以表明它在这里被捕获）。

是否可以解释为什么当屏幕上的动画完成时，if 语句仍然返回 false？有没有更好的方法来防止任何点击，直到每个步骤的动画完成？

4

1 回答 1

4

我认为您的问题/问题与$building.animate功能有关。

检查此代码：（
也在这里）

 $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()发现许多同级，并且脚本.parent()在 1000 毫秒超时后运行每个函数，等待最后一个完成，然后再开始使用新的同级。

仅出于调试目的，请在此处检查，当超时仍为 1000 毫秒时，并在动画运行时查看 console.log。

于 2013-06-26T16:50:06.590 回答