jqueryは複数のリストアイテムでホバーしてアニメーションします

Question

OK、私は私が望むものに非常に近い私の望むアニメーションを持っています。しかし私はバグに遭っている。 http://garibaldi.juggernautwebdesign.com/そしてそれは＃menu-left nav（カラフルなもの）です。あなたが動かすと、それは想定されているように開く。 にを完全にアニメーションさせてから、新しい要素にカーソルを移動するか、そのリスト項目を選択して閉じると、正しく閉じられ、新しい項目が表示されます（新しいリスト項目にカーソルを合わせた場合）。しかし、リストアイテムの上にマウスを置いて、完全にアニメートする時間が来る前に素早くマウスを移動すると、あまりにも遠くまで滑り落ちます。 最初のホバーが完全にアニメーション化されるまで、アニメーションを停止する方法はありますか？私は、キューオプションを使用してみましたが、それはちょうどホバリングの任意のアニメーションを停止しました。

は、ここに私のコードです：

$(document).ready(function() { 
    //Left nav 
    $('#menu-left').children().addClass('closed'); 

    $('#menu-left > li a').click(function(e){ 
     e.preventDefault(); 
    }); 

    $('.closed').live('hover', function() { 

     var position_open = parseInt($(this).css('bottom')) + parseInt($('.sub-menu', this).css('height')) - 12; 
     $(this).animate({ bottom: position_open }, function() { 
      $(this).removeClass('closed'); 
      $(this).addClass('opened');   
     });  
    }); 

    $('.opened').live('hover', function() { 
     var position_close = parseInt($(this).css('bottom')) - parseInt($('.sub-menu', this).css('height')) + 12; 
     $(this).animate({ bottom: position_close }, function() { 
      $(this).removeClass('opened'); 
      $(this).addClass('closed'); 
     });  
    }); 

}); 

任意の助けいただければ幸いです！

Answer 1

animateを呼び出す前にフラグを追加してみることができます。

$(document).ready(function() { 
var animating = false; 
     //Left nav 
     $('#menu-left').children().addClass('closed'); 

     $('#menu-left > li a').click(function(e){ 
      e.preventDefault(); 
     }); 

     $('.closed').live('hover', function() { 

      var position_open = parseInt($(this).css('bottom')) + parseInt($('.sub-menu', this).css('height')) - 12; 
        if(!animating) { 
         animating = true; 
       $(this).animate({ bottom: position_open }, function() { 
       $(this).removeClass('closed'); 
       $(this).addClass('opened'); 
           animating = false; 
       });  
        } 
     });   

    }); 

また、ホバーハンドラのコードのいずれかを削除してください：このような何か。彼らはお互いに踏み込んでいるようだ。

Answer 2

これ以上のテストをしなくてもわかりませんが、あなたのイベントは期待通りにバブリングしていないと私は賭けています。あなたがまだホバリング/アニメーションをしている間にクラスを追加/削除しているので、プロセスは数回起動します。

mouseenter/mouseleaveイベントをトリガする関数を書き直すことをお勧めします。これは、イベントが1回だけ発生することを確認するのに役立つと思います。このメソッドでクラスを追加/削除する必要はありません。

$(".slide_box").live('mouseenter', function() { 
    //animate up 
}) 

$(".slide_box").live('mouseleave', function() { 
    //animate down 
})