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/