jQuery動畫無法正常工作

我的jQuery動畫並非可靠地發生，所有的時機似乎都關閉了。它會快速上下移動，然後有時只能中途移動。 setimeout方法似乎比延遲更好，但仍然不能很好地工作。jQuery動畫無法正常工作

這就是我目前已經成功地將div上下移動，並且取決於我在頁面上做的事情似乎影響了它的可靠程度。當我在做的很多它都瘋了，但有時其他時候它是好的

<script type="text/javascript"> 

$(document).ready(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script>

我已刪除了與scroloTop 0線，但它會隨機滾動到頂部。我不使用其他scroilltop

來源

2014-12-07 Tom Bruton

通過做「.load（）」你的意思是使用'$（窗口）.load（函數（）{/ * ... * /}）;'？ – dotpush 2014-12-07 20:49:17

是的，每當我這樣做，它會導致問題 – 2014-12-07 21:04:00

的問題基本上是不同的事情可能與這種類型的代碼發生，這取決於你穿什麼的.load（）回調的任何地方之間的延遲事件。

DOMContentLoaded（「就緒」）事件發生在「加載」事件之前，但問題在於，通常您不知道兩個事件之間的延遲。

通過執行代碼，如：

$(document).ready(function() { 
    setTimeout(function() { 
    // Do some stuff 
    // ... 
    }, 2000);

你不知道的setTimeout的回調將之前或「load」事件後執行。如果DOMContentLoaded事件和加載事件之間的延遲小於2秒，setTimeout回調將在加載事件之後執行（並且在回調之後執行），以便簡化（因爲setTimeout延遲永遠不會是事件）「」）。否則，他們將被執行。

解決方案是確保無論「加載」和「就緒」事件之間的延遲如何，您的代碼都能夠應對這種情況。

您可以考慮：

「（）.load」回調移動不亞於您可以將代碼在你進入「就緒（）」的回調。如果可能，您應該更喜歡「準備好」事件。
如果某些代碼確實依賴於「加載」事件，則應該將此代碼（以及依賴它的代碼，可能包含您的問題的片段）放入「.load（）」中。

您現在應該測試，因爲它的快速做到這一點，使用：

<script type="text/javascript"> 

$(window).load(function scrollplaying() { 
    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 50 
    }, '500'); 
    }, 2000); 

    setTimeout(function() { 
    $('#songplaybox').stop().animate({ 
     scrollTop: 0 
    }, '500'); 
    }, 5000); 

    window.setTimeout(function() { 
    scrollplaying() 
    }, 8000) 
}); 

</script>

然而，即使它似乎工作，你真的應該考慮的選項「1」。

請記住，就緒事件不太可能受到緩慢（或崩潰）服務器上的外部資源的影響，然而在這種情況下窗口「負載」事件可能發生得非常晚。或者從不發生。因此，如果可能的話，「準備好」事件應該是首選。

希望這有助於

來源

2014-12-07 21:45:43 dotpush

謝謝你的這些信息我已採取你的意見，現在都很高興 – 2014-12-07 22:42:59

DEMO

<script type="text/javascript"> 

$(document).ready(function() { 
    $("html, body").animate({scrollTop: '50px'},2000,function(){ 
      $(this).animate({scrollTop: '0px'}, 3000); 
    }); 

}); 

</script>

來源

2014-12-07 20:46:04

這隻有一次，沒有延遲，我需要它延遲循環 – 2014-12-07 21:08:31

jQuery動畫無法正常工作

回答

相關問題