2014-12-07 7 views
1

我的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

+0

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

+0

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

回答

0

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

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

通過執行代碼,如:

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

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

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

您可以考慮:

  1. 「().load」回調移動不亞於您可以將代碼在你進入「就緒()」的回調。如果可能,您應該更喜歡「準備好」事件。
  2. 如果某些代碼確實依賴於「加載」事件,則應該將此代碼(以及依賴它的代碼,可能包含您的問題的片段)放入「.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」。

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

希望這有助於

+0

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

0

DEMO

<script type="text/javascript"> 

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

}); 

</script> 
+0

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