即使在停止鼠标之后，jQuery快速悬停在外面仍能保持触发事件

I have a div whose width is varied through jquery animation. But jQuery's hover function keeps trigging even when I stop mouse after fast in outs of mouse pointer. See the running code below and fastly move mouse couple of times and then stop mouse, you will see events keep triggering. How can I fix this. Animation at slower speed is needed can't remove it as a fix.

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

3 个解决方案

#1

Use queue: false

使用queue: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

You can use .stop() before each .animate() to stop all running animations for selected elements:

您可以在每个.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

I ran across this problem and what ultimately helped me out with it was using the advice from CSSTricks. Here they break down why the stop solution works. They also introduce the technique of checking if an element is still animating before performing another animation.

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

Also, you can use the HoverIntent plugin. It does all the dirty work and makes sure that a person stops on an element before the animation initiates. This means that an animation does not automatically begin when hovering, it will begin when stopping. It just depends on what you want to do.

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

#1