停止下一個動畫開始前一個動畫的JQuery的

Question

我已經做了四span其上mouseOver動畫到top:20px和mouseOut動畫回top:-20px。

我寫了這個代碼：

$(".pull_down").mouseover(function(){ 
     $(this).animate({top:'20px'}); 
    }); 
    $(".pull_down").mouseout(function(){ 
     $(this).animate({top:'-20px'}); 
    }); 

所有span具有相同的類pull_down具有這種CSS style：

.pull_down 
{ 
    -webkit-msie-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 


    background:#900; 
    color:#FFF; 
    font-size:20px; 
    text-transform:capitalize; 
    font-weight:bold; 
    padding:5px; 
    position:absolute; 
    border:#000 solid 2px; 
    border-bottom-left-radius:10px; 
    padding-right:100px; 
    z-index:500; 
    width:100px; 
} 
.pull_down:hover 
{ 
    cursor:pointer; 
} 

基本上這是沒有用的。

的問題就在這裏，如果鼠標越過這些元素超過1次，說7次，那麼這些動畫排隊，這看起來很笨拙

所以，我想要的是，當我徘徊在一段範圍內它開始動畫，當我切換另一個範圍時，最後一個範圍恢復到它的位置。

一個例子是here

我也看了相關的帖子爲.stop()，但無法弄清楚如何做到這一點。

Answer 1

之一的jQuery的真棒性質之一是方法鏈接，其允許定時事件的串行處理。

如果你使用.stop（）重寫你的代碼，你應該能夠做到這一點。

喜歡這張

$(".pull_down").mouseover(function(){ 
    $(this).stop().animate({top:'20px'}); 
}); 
$(".pull_down").mouseout(function(){ 
    $(this).stop().animate({top:'-20px'}); 
}); 

這將清除動畫隊列所選DOM對象，並隨後添加到被立即處理的動畫。

要停止其他所有的跨度，只重用這樣

$(".pull_down").mouseover(function(){ 
    $(".pull_down").stop(); 
    $(this).animate({top:'20px'}); 
}); 
$(".pull_down").mouseout(function(){ 
    $(".pull_down").stop(); 
    $(this).animate({top:'-20px'}); 
}); 

裏面調用的選擇

Answer 2

使用.stop([clearQueue ] [, jumpToEnd ])

$(".pull_down").mouseover(function(){ 
    $(this).stop(true, true).animate({top:'20px'}); 
}); 
$(".pull_down").mouseout(function(){ 
    $(this).stop(true, true).animate({top:'-20px'}); 
});