爲什麼我的jquery在滾動動畫時需要這麼長時間？

我有一個盒子，當您滾動10px時滑動100px，如果滾動小於10px，則滑回默認位置。盒子做動畫，但是，它有一點點延遲。任何人都可以幫我解決這個問題嗎？爲什麼我的jquery在滾動動畫時需要這麼長時間？

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 LINK https://jsfiddle.net/ispykenny/m6ffj83g/1/

感謝爲您的時間提前和幫助！

來源

2016-09-14 kenny

'.scrollTop（）'設置scrollTop。爲了得到它，使用不帶圓括號的'.scrollTop' –

因爲滾動事件處理程序被激發很多次，每次它將一個新的動畫放入隊列中。使用超時解釋滾動事件可能是一種解決方法或出隊fx隊列https://jsfiddle.net/m6ffj83g/2/ –

嘗試並在滾動事件上添加設置超時，否則會檢查每1px滾動 – Webpandit

您的動畫需要這麼長時間的原因是，動畫會在每個滾動事件超過10px時運行，並且這在客戶端非常密集。有幾個選項，可以用jQuery中的.stop（）函數進行實驗，或者編寫一個if 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; 
} 
});

試試這個！

來源

2016-09-14 16:29:57 samisonline

默認情況下，每個animate（）調用會持續400毫秒。 – Octopus

嘿，非常感謝你！這工作完美。 – kenny

爲什麼我的jquery在滾動動畫時需要這麼長時間？

回答

相關問題