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

使用setInterval调用的jQuery在第一个时间间隔内没有动画

1 个答案: