在我正在开发的网络应用程序中,我想创建一些 slider div
,它们将分别随着鼠标悬停和鼠标移出而上下移动。我目前通过使用 animate()
并根据需要减少/增加其 top
css 值,使用 JQuery 的 hover()
函数实现它。实际上,这相当有效。
问题是它往往会被卡住。如果将鼠标移到它上面(特别是靠近底部),并快速将其移开,它会不断地上下滑动,直到完成 3-5 个循环才会停止。在我看来,这个问题可能与一个动画在另一个动画完成之前开始有关(例如,两个动画都试图运行,所以它们来回滑动。)
好的,现在是代码了。这是我正在使用的基本 JQuery:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
我还在 JSFiddle 中重新创建了该行为.
对发生的事情有什么想法吗? :)
==编辑==更新的JSFiddle
最佳答案
它并不完美,但添加 .stop(true,true)
将阻止您所看到的大部分内容。
如果您快速从下向上悬停,它仍然会闪烁,因为您将鼠标移出 div 导致触发 mouseout 事件,从而将 div 动画向下。
您可以通过减少延迟来减少闪烁,但它仍然会存在,直到延迟为 0(无动画)
更新
我想了想,意识到有一个明显的解决方案。类似悬停意图的功能!
$(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");
}
);
});
关于javascript - 如何停止有弹性的 JQuery 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10883238/