我如何阻止一个弹性的JQuery动画？
在我正在开发的一个webapp中，我想创建一些滑块div，它将与mouseover & mouseout一起上下移动。我现在已经用JQuery的hover()函数实现了它，方法是使用animate()并根据需要减少/增加它的top css值。实际上，这很好用。
问题是它往往会被卡住。如果你移动鼠标在它上面(特别是在底部附近)，并迅速移除它，它将持续地上下滑动，直到它完成3-5个周期才会停止。在我看来，这个问题可能与一个动画在完成另一个动画之前开始有关(例如，这两个动画都试图运行，因此它们来回滑动)。
好了，现在是密码。下面是我使用的基本JQuery：
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);我还在JSFiddle中重新创建了这种行为。
对发生了什么事有什么想法吗？
==EDIT==更新JSFiddle
回答 5
Stack Overflow用户
发布于 2012-06-04 15:43:51
这并不完美，但添加.stop(true,true)将阻止您看到的大部分内容。
http://jsfiddle.net/W5EsJ/18/
如果你快速从下向上悬停，它仍然会闪烁，因为你移动你的鼠标离开div导致鼠标退出事件触发，动画的div返回。
您可以通过减少延迟来减少闪烁，但是它仍然存在，直到延迟为0(没有动画)。
更新
我想了一想，意识到有一个明显的解决办法。半心半意-类似功能！
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});Stack Overflow用户
发布于 2012-06-04 14:56:24
您可以使用.stop()，也可以使用外部容器位置。
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
演示
希望这能有所帮助
Stack Overflow用户
发布于 2012-06-04 14:49:37
无法复制您的问题，但我相信hover被多次调用。要解决这个问题，您可以检查div是否已经在动画中。如果是，那就不要再运行另一个动画了。
添加以下代码以检查div是否已经“动画”：
if ($(this).is(':animated')) {
return;
}代码：http://jsfiddle.net/W5EsJ/2/
参考资料：http://api.jquery.com/animated-selector/
https://stackoverflow.com/questions/10883238
复制相似问题
腾讯云开发者
