javascript - 当用户继续滚动时，在不中断动画的情况下在滚动页面上滑动 div 和关闭页面

Question

我试图仅使用 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);
    }
});

示例:https://jsfiddle.net/Hysteresis/hg9cvxop/6/

Answer 1

这有效: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;
    });
}