Question

我试图让div滑出并在悬停时，即鼠标分别进入和离开。然而，当我多次进出时，div一直在来回滑动，基本上是我悬停的次数。请参阅此jsFiddle example。

正如你可能已经猜到的那样，一旦鼠标在元素之外，我希望能够使div停止（即滑入），无论我多少次将鼠标悬停在它上面。我认为我对jQuery动画的理解缺少一些东西。

$("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).animate({ left: "-270" }, 500);
});

谢谢。

Answer 1

您需要jQuery .stop() function。在开始新动画之前将其插入命令链中，以中断任何正在进行的动画。

$('#state-slider').hover(function() {
    $(this).stop().animate({ left: 0 }, 500);
}, function() {
    $(this).stop().animate({ left: -270 }, 500);
});

Working jsFiddle =)

Answer 2

$("#state-slider").hover(function() {
  $(this).animate({
    left: '0'
  }, 500);
}, function() {
  $(this).stop(true,true).animate({ left: "-270" }, 500);
});

DEMO

http://api.jquery.com/stop/

Answer 3

有一个例子

http://jsfiddle.net/amkrtchyan/TQz5U/1/

和jquery代码

$(function() {
    $("#state-slider").hover(function() {
        $(this).stop(true,true).animate({
            left: '0'
        }, 500);
    }, function() {
        $(this).stop(true,true).animate({ left: "-270" }, 500);
    });
});

jQuery动画：一旦鼠标停止动画停止

3 个答案: