用setInterval調用的jQuery在第一個時間間隔不是動畫

Question

我有兩個圖像堆疊。使用setInterval（），最上面的一個消失，暴露第​​二個。然後頂部圖像切換到底部的src而不可見，並且再次變得不透明。第二個圖像變爲下一個圖像，並等待setInterval（）淡出頂部圖像，然後重新執行。

這一切都很好，除了第一次;沒有褪色。我沒有看到什麼？

這發生在所有的Firefox和Chrome上，我假設所有其他人。

HTML

<script type="text/javascript"> 
    setInterval('swapImage()', 5000); 
    var galleryCount = 3; 
    </script> 

    ... 

    <img id="image" src="images/gallery/01.jpg" /> 
    <img id="imagenext" src="images/gallery/02.jpg" /> 

的Javascript

function swapImage(imageToFadeID) 
{ 
    $("#image").animate 
    (
     { "opacity": "0" }, 
     "slow", 
     "linear", 
     changeImage() 
    ); 
}; 

var i = 1; 

function changeImage() 
//counter +1 
{ 
i = i + 1; 
//add "0" to image number "j" if less than 10. 
if (i < 10) 
    { 
    var j = "0" + i; 
    } 
else 
    { 
    j = i; 
    } 
//change top image to match bottom 
var topImage = document.getElementById("imagenext").src; 
document.getElementById("image").src = topImage; 
//make top image reappear 
document.getElementById("image").style.opacity = '1'; 
//change out bottom image to next 
var btmImage = "images/gallery/" + j + ".jpg"; 
document.getElementById("imagenext").src = btmImage; 
//reset counter if at end 
if (i > galleryCount - 1) 
    { 
    i = 0; 
    } 

} 

Answer 1

我看起來像你調用changeImage，而不是把它當作一個回調animate的：

錯誤：

function swapImage(imageToFadeID) 
{ 
    $("#image").animate 
    (
     { "opacity": "0" }, 
     "slow", 
     "linear", 
     changeImage() // <--- !!! Remove the parentheses from this line! 
    ); 
}; 

---

右：

function swapImage(imageToFadeID) 
{ 
    $("#image").animate 
    (
     { "opacity": "0" }, 
     "slow", 
     "linear", 
     changeImage 
    ); 
};