我正在创建一个带有自定义动画的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>
我将如何处理？
使用.stop()之前打个电话开始动画。它将停止上一个动画。
eq。
$("#box").stop().animate({...})
和以前一样 .toggle()
$("#box").stop().toggle();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句