我试图仅使用 jQuery 将 div 平滑地滑入和滑出页面(从左到右)。我已经完成了任务,但是如果您在动画仍在进行时继续向上或向下滚动,它会在 Action 中间中断它,导致它犹豫。我以前遇到过这个问题,如果不使用某种插件就永远无法解决。
我知道如何使用 CSS 转换、jQuery UI、greensock 等来完成此操作,但我很好奇是否有一种方法可以仅使用 jQuery 来防止这种中断。如果有纯 JavaScript 解决方案(无 jQuery),我也持开放态度。
我的代码:
var amountScrolled = 50;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('#slide').stop().animate({marginLeft:"0px"}, 500);
} else {
$('#slide').stop().animate({marginLeft: "-400px"}, 500);
}
});
最佳答案
这有效:JSFIDDLE link
都是关于回调函数的!
var amountScrolled = 50;
var loopRunning = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled){
if(loopRunning === 0){
animateSlide("0px",500);
}
} else {
if(loopRunning === 0){
animateSlide("-400px",500);
}
}
});
function animateSlide(px, time){
loopRunning = 1;
$('#slide').stop().animate({marginLeft:px}, time, function(){
loopRunning = 0;
});
}
关于javascript - 当用户继续滚动时,在不中断动画的情况下在滚动页面上滑动 div 和关闭页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30081989/