jQueryアニメーションの問題

Question

私はいくつかのボタン（アンカー）を持つメニューを持っています。
特定のボタンを押したときにdiv要素がスライドアニメーションに表示されます。
また、ユーザーが他のボタンの上に置いたときにdiv要素がアニメーション内に隠れることも欲しいです。
問題は、他の要素の上にマウスをすばやく移動すると、非表示のアニメーション自体が何度も繰り返されることです。
Javascriptを/ jQueryの：

$(document).ready(function() { 

    $("#shiurButton").click(function(event) { 
    //Shows the div element 
     $(".shiurPicker").toggle('slide', {direction:'right'}, 1000); 
    }); 

    $("#testButton").mouseover(function(event){ 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
    }); 

    $("#dictionaryButton").mouseover(function(event) { 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
    }); 

    $("#helpButton").mouseover(function(event) { 
     if ($(".shiurPicker").is(":visible")){ 
      $(".shiurPicker").hide('slide', {direction:'right'}, 1000); 
     } 
}); 

}); 

任意のアイデア ここでのコードですか？
ありがとう

Answer 1

最初に、同じことをするアニメーションを組み合わせてください。

$("#shiurButton").click(function(event) { 
    //Shows the div element 
    $(".shiurPicker").stop(true, true).toggle('slide', {direction:'right'}, 1000); 
}); 

$("#testButton, #dictionaryButton, #helpButton").mouseover(function(event){ 
    if ($(".shiurPicker").is(":visible")){ 
     $(".shiurPicker").stop(true, true).hide('slide', {direction:'right'}, 1000); 
    } 
}); 

---

UPDATE：

使用data()：

$(document).ready(function() { 

    $("#shiurButton").click(function(event) { 
     $(".shiurPicker").stop(true, true).show('slide', { 
      direction: 'right' 
     }, 1000); 
     $(".shiurPicker").data('hide', false); 
    }); 

    $("#testButton, #dictionaryButton, #helpButton").mouseover(function(event) { 
     var hide = $(".shiurPicker").data('hide'); 
     if(hide == false){ 
      $(".shiurPicker").stop(true, true).hide('slide', { 
       direction: 'right' 
      }, 1000); 
      $(".shiurPicker").data('hide', true); 
     } 
    }); 
}); 

フィドル：http://jsfiddle.net/maniator/UW9gf/