如何在鼠标移出时停止不完整的动画，然后在 .hover() 中再次鼠标移入？答案

【问题标题】：How to stop the incompleted animation while mouse out and then mouse in again in .hover()?如何在鼠标移出时停止不完整的动画，然后在 .hover() 中再次鼠标移入？
【发布时间】：2014-02-17 06:35:33
【问题描述】：

我正在尝试使用 .hover() 来隐藏和显示用户鼠标在图像中的选项。

这是我的 JS 代码：

$(document).ready(function(){
$('#test').hover(
    function(){
        $('.caption').show('slide', {direction: 'left'}, 1200);
    },
    function(){
        $('.caption').hide(1200)});});

现在动画可以工作了，但是如果我快速进出鼠标多次，标签的重复速度就赶不上鼠标了。我希望当我再次悬停时，不完整的动画可以暂停它的工作并执行当前的调用。

我尝试添加.stop()，但当我再次鼠标进入时，该功能无法重复

有人知道怎么做吗，谢谢。

这里是 JSFiddle：http://jsfiddle.net/x69chen/aznEa/2/

【问题讨论】：

见这里api.jquery.com/stop

标签： javascript jquery hover jquery-hover

【解决方案1】：

在 Jquery 中使用 stop(true,true)。我们可以在没有通过添加 .stop(true, true) 到链：

$(document).ready(function(){

    $('#test').hover(
        function(){
            $('.caption').stop(true,true).show('slide', {direction: 'left'}, 1200);
        },
        function(){
            $('.caption').stop(true,true).hide(100)});
});

【讨论】：

哦，非常感谢，我从来不知道 .stop() 可以添加到那里。
但它似乎有错误，当我快速尝试鼠标进出鼠标几次时，标签已被扔出 div。你知道怎么解决吗？
你使用 stop() 或 stop(true,true);
我第一个使用stop(true, true)，第二个使用stop(true)，同样的情况，我在两个地方都使用stop(true)，你可以试试
但我在 jsfiddle 工作，它的显示正确。没有问题。

【解决方案2】：

鼠标移出时使用 $('.caption').clearQueue()。

这将清除当前正在处理的动画

参考：http://api.jquery.com/clearQueue/

【讨论】：

【解决方案3】：

//试试这个

$(document).ready(function(){
$('#test').hover(
    function(){
        $('.caption').show('slide', {direction: 'left'}, 1200);
    });

$('#test').mouseout(function(){
    $('.caption').stop().show('slide', {direction: 'left'}, 1200);
        $('.caption').hide(100);
});
});

见 js fiddle http://jsfiddle.net/x69chen/aznEa/2/

【讨论】：