画面の左 (左: -662px) から左: 342px にスライドするサブメニューがあります。これは、プライマリ メニュー項目をクリックするとトリガーされます。
プライマリ メニューが再度クリックされると、サブメニューは -662px に戻ります。私の問題は、プライマリ メニュー項目が立て続けにクリックされた場合、サブメニュー要素が一度に 342 ピクセルずつページを横切って移動することです。思うように前後に動かない。
これは、要素のアニメーション中にのみ発生します。サブメニューのアニメーションが終了した後にプライマリ メニュー項目がクリックされると、必要に応じて -662px に戻ります。
.stop() を追加してみましたが、影響はありません。これを修正する方法を知っている人はいますか?
//IF IS SHOWN, HIDE
$("#menu ul li").click(function() {
$("#menu ul li ul").each(function() {
//GET SUBMENUS CURRENT POSITION
var sub2pos = $(this).css('left');
//IF MARGIN IS GREATER THE 340PX HIDE THE MENU
sub2pos = parseInt(sub2pos);
if(sub2pos > 340){
$(this).stop().animate({ left: '-=662px' }, 400 );
}
});//END EACHFUNCTION
});//END 1st CLICK FUNCTION
//IF IS HIDDEN, SHOW
$("#menu ul li").click(function() {
//GET SUBMENUS CURRENT POSITION
var sub2pos = $(this).children('ul').css('left');
//IF MARGIN IS LESS THEN 342PX SHOW THE MENU
sub2pos = parseInt(sub2pos);
if(sub2pos < 342){
$(this).children('ul').delay(500).stop().animate({ left: '+=662px' }, 400 );
}
});//END 2nd CLICK FUNCTION
編集:ここでフィドルを作成しました。http://jsfiddle.net/q5Htx/19/メニュー項目をすばやくクリックするとどうなるか注意してください