Question

我正在尝试在css / j查询中创建一系列图块，这些图块代表建筑物及其中的房间。当您单击建筑物时，会发生一些j查询动画，这会移除其他建筑物，然后显示建筑物内的房间。进入建筑物后，“后退”磁贴将触发进一步的动画以返回原始设置。

这是显示此内容的jsfiddle。

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

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

然而，从动画完成屏幕到上面的if语句没有返回false似乎有相当长的延迟。如果你点击一个瓷砖并在动画完成后点击后面，你会看到这个。（我在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()找到了许多兄弟姐妹，脚本在1000毫秒超时后运行每个.parent()函数，等待最后一个函数在新兄弟开始之前完成。

仅仅为了调试目的，请检查 here ，当超时仍为1000毫秒时，在动画运行时查看console.log。

JQuery CSS $（'：animated'）。动画在屏幕上完成后的长度延迟

1 个答案: