如何在鼠标退出时停止未完成的动画，然后在 .hover() 中再次将鼠标移入

Question

我正在尝试使用 .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/

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

Answer 2

在鼠标输出时使用 $（'.caption'）.clearQueue（）。

这将清除当前正在进行的动画

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

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

在 http://jsfiddle.net/x69chen/aznEa/2/看 JS 小提琴