jQuery 快速悬停即使在停止鼠标后也会继续触发事件

Question

我有一个 div，它的宽度通过 jquery 动画改变。但是即使我在鼠标指针快速退出后停止鼠标，jQuery 的悬停功能也会继续触发。查看下面的运行代码并快速移动鼠标几次然后停止鼠标，您将看到事件不断触发。我怎样才能解决这个问题。需要较慢速度的动画无法将其删除作为修复。

    jQuery(document).ready(function($){

$(".xixouter").hover(function() {
$(".xixouter").animate({ width: "95%"}, 500, "swing");
$(".contextent").animate({ opacity: "1"}, 450);///
//$('.contextent').css("opacity","1"); 
},
function() {
//$('.contextent').css("opacity","0");  
$(".contextent").animate({opacity: "0"}, 450); ////
$(".xixouter").animate({width: "240px"}, 500, "swing");  
}); 
});

.xixouter{
position:relative;
padding: 15px;
height: 100px;
width: 240px;
margin:0px auto;
overflow:hidden;
    background: red;
}
.contextent{
padding: 40px !important;
display:block;
opacity: 0;
color: #555;
font-size: 14px;
text-align: center;
line-height: 1.8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="xixouter">
<span class="contextent">
content
</span>
</div>

Answer 1

使用队列:false

    jQuery(document).ready(function($){

$(".xixouter").hover(function() {
$(".xixouter").animate({ 
   width: "95%"}, 
   {queue: false }, 500, "swing");
$(".contextent").animate({ opacity: "1"}, {queue: false }, 450);
},
function() {
$(".contextent").animate({opacity: "0"}, {queue: false }, 450);
$(".xixouter").animate({width: "240px"}, {queue: false }, 500, "swing");  
}); 
});

.xixouter{
position:relative;
padding: 15px;
height: 100px;
width: 240px;
margin:0px auto;
overflow:hidden;
    background: red;
}
.contextent{
padding: 40px !important;
display:block;
opacity: 0;
color: #555;
font-size: 14px;
text-align: center;
line-height: 1.8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="xixouter">
<span class="contextent">
content
</span>
</div>