用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 
    ); 
};