jQuery动画:一旦鼠标移出就停止动画 [英] jQuery Animation: Stop Animating Once Mouse Out

问题描述

我试图使div滑出和滑入，分别是鼠标进入和离开.但是，当我将鼠标悬停几次时，div基本上一直来回滑动直到达到悬停的次数.请参考此 jsFiddle示例.

I am trying to make a div to slide out and in upon hover i.e. mouse enter and leave, respectively. However, when I hovered in and out several times, the div kept sliding back and forth basically up to the number of times I did the hover. Please refer to this jsFiddle example.

您可能已经猜到了，我希望一旦鼠标移到元素之外，就使div停止(即滑入)，无论我将鼠标悬停在元素上多少次.我认为我对jQuery动画的理解有些缺失.

As you've probably guessed, I am hoping to make the div stop (i.e. slided in) once the mouse is outside of the element regardless how many times I've moused over it. I think there is something missing in my understanding about jQuery animation.

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

谢谢.

推荐答案

您需要 jQuery .stop()函数.在开始新动画之前，将其插入命令链中，以中断所有正在进行的动画.

You need the jQuery .stop() function. Insert it in your command chain before you start a new animation, to interrupt any ongoing animations.

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

正在使用jsFiddle =)

这篇关于jQuery动画:一旦鼠标移出就停止动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！