0

次のコードを使用して、ユーザーが上下の矢印キーを使用して写真の説明 ( #photoinfo) とメニュー ( ) を表示または非表示にできるようにしています。.slidetableこれら 2 つの div のいずれかが既に開いている場合、反対の矢印を押すと、その 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;
});​

問題は、2つの矢印が同時に押された場合、または次々に押された場合にのみ、両方のdivが開き、互いに重なり合っていることです。keydown最初のアニメーションが開始された後に関数のバインドを本質的に解除し、終了したら関数を再バインドする方法を探していkeydownます。私はjQueryの初心者なので、これが最善の方法ではないかもしれません。アニメーション中に他の関数が起動するのを防ぐ最も簡単な方法は何ですか?

4

2 に答える 2

1

アニメーションを起動する前にブール値（isAnimating）をtrueに設定し、アニメーションが完了したらfalseに設定できます。キーダウンの上部に「

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

アニメーションの最後に関数呼び出しがある構文を覚えていませんが、jQueryのドキュメントにあります

于 2010-09-27T18:36:21.400 に答える
0

申し訳ありませんが、私は少し混乱しています。あなたの答えの実装はこのようになりますか、それとも私は道を外れていますか?

$(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;
});
于 2010-09-27T22:04:45.580 に答える