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，真的）到链：

$(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小提琴

如何在鼠标移出时停止未完成的动画，然后再次在.hover（）中鼠标？

3 个答案: