Отключить клавиатуру во время анимации

Question

Я использую следующий код, чтобы пользователь мог показать или скрыть описание фотографии (#photoinfo) и меню (.slidetable) с помощью клавиш со стрелками вверх и вниз.Если один из этих двух элементов div уже открыт, нажатие противоположной стрелки закрывает этот элемент перед открытием другого.

$(document).unbind('keypress');
$(document).keydown(function(event) {
    switch (event.keyCode) {
    case 38:
        if ($('#photoinfo').is(".open")) {
            closeInfo();
        }
        else if ($('.slidetable').is(".open")) {
            closeSlide2();
            openInfo();
        }
        else {
            openInfo();
        }
        break;
    case 40:
        if ($('.slidetable').is(".open")) {
            closeSlide();
        }
        else if ($('#photoinfo').is(".open")) {
            closeInfo();
            openSlide();
        }
        else {
            openSlide();
        }
        break;
    }
    return false;
});​

Кажется, это работает, только проблема в том, что если две стрелки нажаты одновременно или одна за другой, оба div открыты, перекрывая друг друга.Я ищу способ, по существу, отсоединить функцию нажатия клавиш после первой анимации и заново связать функцию нажатия клавиш после ее завершения.Я новичок в jquery, так что, возможно, это не лучший способ сделать это.Какой самый простой способ предотвратить запуск другой функции во время анимации?

Спасибо

Answer 1

Вы можете установить логическое значение (isAnimating) в значение true, прежде чем запускать анимацию, а после ее завершения установить значение false.В верхней части keydown просто скажите

if(isAnimating)
{
  event.preventDefault();
  return false;
}

Я не помню синтаксис для вызова функции в конце анимации, но это в документации jQuery

Answer 2

Извините, я немного запутался. Будет ли реализация вашего ответа выглядеть примерно так, или я далеко?

$(document).unbind('keypress'); 
$(document).keydown(function(event) {
            if(isAnimating)
            {
              event.preventDefault();
              return false;
            }

            switch (event.keyCode) {

                case 38: var isAnimating = true; 

                        if ($('#photoinfo').is(".open")) {
                            closeInfo();

                        }

                        else if ($('.slidetable').is(".open")) {
                            closeSlide2();
                            openInfo();

                        }

                        else {
                            openInfo();


                        } break;


                case 40: var isAnimating = true;
                        if ($('.slidetable').is(".open")) {
                              closeSlide();

                        }

                        else if ($('#photoinfo').is(".open")) {
                            closeInfo();
                            openSlide();

                        }

                        else {
                            openSlide();

                        } break;    

            }
            var isAnimating = false;                                
            return false;
});