強制jQuery在運行時更改動畫

我正在使用自定義動畫創建jQuery下拉菜單，並且菜單應該在鼠標進入時啓動動畫，並在鼠標離開時啓動關閉動畫，而不管任何正在運行的動畫。問題是jQuery在開始新動畫之前完成動畫。例如;強制jQuery在運行時更改動畫

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#start").mouseenter(function(){ 
    $("#box").toggle(); 
    $("#box").animate({ 
     top:'50px', 
     opacity:'1' 
    },500,function(){ 
    }); 
    }); 
    $("#start").mouseleave(function(){ 
    $("#box").animate({ 
     top:'25px', 
     opacity:'0' 
    },500,function(){ 
    $("#box").toggle(); 
    }); 
    }); 
}); 
</script> 
</head> 

<body> 
<button id="start">Start Animation</button> 
<div id ="box" style="background:#e6e6e6;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;"> 
</div> 

</body> 
</html>

我該怎麼辦？

來源

2014-10-18 CaffeineToCode

使用.stop()爲您開始動畫。它會停止以前的動畫。

eq。

$("#box").stop().animate({...})

和相同的前.toggle()

$("#box").stop().toggle();

來源

2014-10-18 19:12:23

強制jQuery在運行時更改動畫

回答

相關問題