加載圖像時間不一致（jQuery/PHP/HTML）

Question

我使用jQuery創建一個簡單的幻燈片放映。

我在home.php文件中有一個幻燈片。我有一個菜單欄。當我在菜單中單擊home時，我在主頁的內容div中加載了home.php。幻燈片和菜單都沒有問題。組合後，它們在第一次加載時工作良好。然而，當加載多次時，時間間隔並不完美，並且在不均勻的負載模式下工作。 這是我在home.php

<script> 
$(function(){ 
$('.fadein img:gt(0)').hide(); 
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000); 
}); 
</script> 

和menu.php

<li><a href=# onclick="$('#content').load('home.php') ;return false">HOME</a></li> 
<li><a href=# onclick="$('#content').load('buyitems.php') ;return false">BUY</a></li> 
<li><a href=# onclick="$('#content').load('discuss.php') ;return false">DISCUSS</a></li> 
<li><a href=# onclick="$('#content').load('locationnear.php') ;return false">NEAR YOU</a></li> 

代碼如果您需要詳細資料，讓我知道。

問題 他們單獨工作。當我多次在菜單欄上點擊回家時，時間的淡入並不是一成不變的。一些圖像加載更快，另一些更慢。

Answer 1

延遲動畫執行的原因可能是jQuery動畫隊列。

像fadeOut這樣的新動畫已排好隊列，並等待同一元素上的以前的動畫完成。

要取消當前隊列中您可以使用jQuery.stop()stop - jQuery API

說明：停止在匹配元素當前正在運行的動畫。

所以你的情況，這可能是這樣的：

$('.fadein :first-child').stop(true, true).fadeOut() 

或者你禁用排隊這個動畫fadeOut - jQuery API

布爾值，指示是否將動畫的效果隊列。如果爲false，則動畫將立即開始。

$('.fadein :first-child').fadeOut({ queue : false }) 

---

編輯

每一次點擊你的代碼開始一個新的setInterval這也將動畫添加到隊列中，所以也許清除INTERVALL將幫助：

if (window.currenTimer) { 
    clearInterval(window.currentTimer); 
} 
window.currentTimer = setInterval(function(){ 
    $('.fadein :first-child') 
    .stop(true, true) 
    .fadeOut() 
    .next('img') 
    .stop(true, true) 
    .fadeIn() 
    .end() 
    .appendTo('.fadein'); 
}, 3000);