當用戶繼續滾動時，在滾動頁面上滑動div而不中斷動畫

Question

我正在嘗試使用jQuery將頁面上下滑動（從左到右）。我已經完成了這個任務，但是如果在動畫還在繼續時繼續向上或向下滾動，它會在動作中間中斷它，導致它猶豫不決。我之前遇到過這個問題，如果不使用某種插件就無法解決問題。

我知道如何通過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; 
    }); 
} 

Answer 2

好了，回答你的問題，而不是更好的方法來做到這一點提供諮詢，我通常通過分配一個臨時的類來表示的東西是被動畫的過程中處理這樣的任務。正如其他人所說，造成口吃的原因是因爲滾動功能被多次調用，所以您不斷停止並重新開始動畫。

所以，你可以嘗試這樣的事情（Fiddle）：

var amountScrolled = 50; 

$(window).scroll(function() { 
    if ($('#slide').hasClass('sliding')) { 
     return; 
    } 
    if ($(window).scrollTop() > amountScrolled) { 
     $('#slide').stop().addClass('sliding').animate({marginLeft:"0px"}, 500, function() { 
      $(this).removeClass('sliding'); 
     }); 
    } else { 
     $('#slide').stop().addClass('sliding').animate({marginLeft: "-400px"}, 500, function() { 
      $(this).removeClass('sliding'); 
     }); 
    } 
});