為什么我的jquery在滾動動畫時需要這么長時間？

Question

當你滾動10px時我有一個向右滑動100px的盒子，如果滾動小於10px，則滑回到它的默認位置。 這個盒子確實有動畫，然而，它有一點延遲。 任何人都可以幫我解決這個問題嗎？

HTML

<div id="nest">
  <div id="box">

  </div>
</div>

CSS

#nest {
  width: 95%;
  max-width: 1000px;
  margin: auto;
  background-color: orange;
  height: 1000px;
  padding-top: 150px
}

#box {
  margin: 50px 0px 0px 0px;
  width: 100px;
  height: 100px;
  position:relative;
  background-color: green;
}

jQuery的

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 10) {
    jQuery('#box').animate({left:'100px'})


  } else {
    jQuery('#box').animate({left:'0px'})
}
});

我的JSFIDDLE鏈接https://jsfiddle.net/ispykenny/m6ffj83g/1/

在此先感謝您的時間和幫助！

Answer 1

動畫花費這么長時間的原因是動畫在每個超過10px的滾動事件上運行，這在客戶端非常密集。 有幾個選項，要么在jQuery中試驗.stop（）功能，要么編寫一個條件if語句來檢查動畫是否已經啟動，只有在沒有時才觸發。

https://api.jquery.com/stop/

這是一個方便的資源。

var coin = false;

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 10 && coin === false) {
    jQuery('#box').animate({left:'100px'});
    coin = true;
  } else if (coin === true && jQuery(this).scrollTop() <= 10) {
    jQuery('#box').animate({left:'0px'});
    coin = false;
}
});

嘗試這個！