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

Question

我试图让a div滑出并在悬停时,即鼠标分别进入和离开.然而,当我多次进出时,div不停地来回滑动,基本上是我悬停的次数.请参考这个jsFiddle示例.

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

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

谢谢.

Answer 1

你需要jQuery .stop()函数.在开始新动画之前将其插入命令链中,以中断任何正在进行的动画.

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

工作jsFiddle =)