jQuery UI動畫問題

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

首先要做的第一件事就是結合做相同事情的動畫。然後添加一個stop（）的動畫：

$("#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/