如何使用jQuery从图像列表淡入/淡出单个图像

我很抱歉在这里提问，因为我相信这将是一个简单的任务，但我不知道如何用jQuery构建它，因为我还在学习

我们正试图清理一个代码糟糕的网站，到处都是javascript动画，因此我想通过将每个部分转换为jQuery来简化开发过程，而不是将DHTML/javascript黑客弄得一团糟

形势

我有两个div，一个是“显示的图像”，叫做

然后我将从fadercontent中获取第一项，并替换“#fader”的内容

我发现$（“#fader”）.html（…）是我替换内容的方式，而fadeIn（）将是不透明度fader

我不明白的是：

1） 如何跟踪下一项，例如在fadercontent对象中查找下一项，以便循环列表。在javascript中，我使用了数组长度和一个简单的计数器

2） 如何设置动画速度。尝试通过2秒建立fadeIn，然后暂停1秒，然后2秒淡出，替换图像，2秒fadeIn（循环）。也许需要制作动画

---

希望具有jQuery天赋的人能向我展示我需要在这里进一步做什么。

下面的代码将循环遍历

faderContent

的每个子级，并替换

fader

的html。。。当它到达终点时，它将继续前进，从头开始

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}

---

工作示例：

此论坛非常棒！！！令人惊叹的！成功了！如果我在显示图像/div内容时设置延迟/暂停。这需要一个额外的函数吗？或者我可以以某种方式链接它吗？无论如何都要标出正确答案o） 是的，你可以很容易地在fadeIn（）之后用

.delay（2000）

链接。delay（2000）还是？

        <div id="fadercontent"></div>

        <div id="fadercontent">
                <div><img src="image0101.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0444.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0256.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image6821.jpg" width="200" height="200" border="0" alt="" /></div>
        </div>

var fadercontent = $('#fadercontent').children();

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}