Как я могу переключаться между двумя функциями в .keypress () ;?

Question

Вот мой сайт: http://mttdn.com/dev/

Если вы нажмете кнопку выключателя в правом верхнем углу, вы увидите, что скрытый div скользит справа. Нажмите кнопку еще раз, и она скользит назад. Я хочу, чтобы такое же действие происходило при нажатии клавиши «P». Я могу установить .keypress () ;, который вы можете увидеть, если вы нажмете 'P', однако, как вы увидите, используя тот же код, который я сделал для .click () ;, div вставляется, затем выскальзывает прямо сейчас. Я пытаюсь выяснить, как использовать .toggle (); в сочетании с .keypress (); чтобы этого не случилось.

Вот мой код:

$(document).ready(function(){
    var previewopen = $(".codepreview");

    $(document).keypress(function(event){
        if (event.which == 112){
            previewopen.animate({left:"-=50%",},'normal');
            previewopen.animate({left:"+=50%",},'normal');
        }
    });
});

Я просто хочу иметь возможность нажать «P», чтобы div выдвинулся и остановился, затем снова нажмите «P», чтобы он сдвинулся назад. Каков наилучший способ сделать это? Любая помощь с благодарностью! Спасибо!

Answer 1

Просто используйте логический переключатель:

(function() {
    var on = false;

    $(document).keypress(function(event) {
        if (event.which == 112) {
            previewopen.animate({left: on ? '-=50%' : '+=50%'}, 'normal');
            on = !on;
        }
    });
})();

Я удалил завершающий , в литерале объекта, что могло бы вызвать проблему в некоторых браузерах (я позволю вам угадать, какие ...), и я использовал анонимную функцию для сохранения on локального.

Answer 2

Кажется, что событие нажатия работает нормально. Почему бы не вызвать его при нажатии клавиши? Примерно так:

$(document).ready(function(){
    $(document).keypress(function(event){
        if (event.which == 112){
            $('.lightswitch').trigger('click');
        }
    });
});