Подтвердить что ты не робот

JQuery CSS $(': анимированный'). Задержка длины после окончания анимации на экране

Я пытаюсь создать серию фрагментов в запросе css/j, которые представляют собой здания и комнаты внутри них. Когда вы нажимаете на здание, возникает некоторая j-анимация запросов, которая удаляет другие здания, а затем показывает комнаты внутри здания. Когда-то в здании "назад" плитка вызовет дальнейшую анимацию, чтобы вернуться к первоначальной настройке.

Вот jsfiddle, показывающий это.

Я использовал следующий фрагмент, чтобы сразу сразу нажать несколько фрагментов:

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

Однако, похоже, что задержка с задержкой с момента завершения анимации на экране выше, если оператор не возвращает false. На js скрипке, если вы нажмете на плитку и щелкните по ней, как только анимация закончится, вы увидите это. (Я поставил предупреждение внутри оператора if, чтобы показать, что он пойман здесь).

Можно ли пролить свет на то, почему, когда анимация на экране закончилась, оператор if все еще возвращает false? Есть ли лучший способ предотвратить любые клики, пока анимация не будет завершена для каждого шага?

4b9b3361

Ответ 1

Я думаю, что ваш вопрос/проблема связана с функцией $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() нашел много родных братьев, а script выполнял каждую из функций .parent() после таймаута 1000 мс, ожидая, что последний будет завершен, прежде чем начинать с нового брата.

Для проверки цели отладки также здесь, когда таймаут еще 1000 мс и посмотрите на console.log пока анимация запущена.