Question

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

＆＃13;

    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");  
}); 
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

Answer 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");
        }
    );
});

Answer 3

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

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

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

3 个答案: