如何在鼠標移出時停止未完成的動畫，然後再次將鼠標放入.hover（）中？

Question

我正嘗試使用.hover（）來隱藏和顯示用戶鼠標在圖像中的選項。

這裏是我的JS代碼：

$(document).ready(function(){ 
$('#test').hover(
    function(){ 
     $('.caption').show('slide', {direction: 'left'}, 1200); 
    }, 
    function(){ 
     $('.caption').hide(1200)});}); 

眼下的動畫作品，但如果我的鼠標輸入並多次鼠標移出迅速，標籤的重複的速度不能用鼠標趕上。而當我再次盤旋時，不完整的動畫可能會暫停執行目前的調用。

我嘗試添加.stop()但隨後的功能不能在當我鼠標再次重複了

有誰知道怎麼做了，謝謝。

這裏是的jsfiddle：http://jsfiddle.net/x69chen/aznEa/2/

Answer 1

使用止動件（真，真）在Jquery.We可以使用不具有多個的 通病創建一個漂亮的滑動效果排隊通過添加.stop動畫（真， 真）的鏈：

$(document).ready(function(){ 

    $('#test').hover(
     function(){ 
      $('.caption').stop(true,true).show('slide', {direction: 'left'}, 1200); 
     }, 
     function(){ 
      $('.caption').stop(true,true).hide(100)}); 
}); 

Answer 2

使用$（ '標題'）clearQueue（）對小鼠進行。

這將清除在過程

當前動畫參考：http://api.jquery.com/clearQueue/

Answer 3

//試試這個

$(document).ready(function(){ 
$('#test').hover(
    function(){ 
     $('.caption').show('slide', {direction: 'left'}, 1200); 
    }); 

$('#test').mouseout(function(){ 
    $('.caption').stop().show('slide', {direction: 'left'}, 1200); 
     $('.caption').hide(100); 
}); 
}); 

看到JS小提琴在http://jsfiddle.net/x69chen/aznEa/2/