即使在停止鼠标后，jQuery快速悬停仍然会触发事件答案

【问题标题】：jQuery fast hover in out keeps trigering events even after stoping mouse即使在停止鼠标后，jQuery快速悬停仍然会触发事件
【发布时间】：2014-12-04 01:55:36
【问题描述】：

我有一个 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>

【问题讨论】：

标签： jquery css jquery-hover

【解决方案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>

【讨论】：

【解决方案2】：

您可以在每个.animate() 之前使用.stop() 来停止所选元素的所有正在运行的动画：

Fiddle.

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

【讨论】：

【解决方案3】：

我遇到了这个问题，最终帮助我解决的问题是使用来自 CSSTricks 的建议。在这里，他们分解了停止解决方案起作用的原因。他们还介绍了在执行另一个动画之前检查元素是否仍在动画的技术。

另外，您可以使用HoverIntent 插件。它完成了所有繁琐的工作，并确保一个人在动画开始之前停在一个元素上。这意味着动画不会在悬停时自动开始，它会在停止时开始。这取决于你想做什么。

【讨论】：