0

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

我们正在尝试清理一个乱七八糟的带有 javascript 动画的网站，所以我想通过将每个部分都变成 jQuery 而不是维护混乱的 DHTML/Javascript hack 来简化开发。

情况

我有两个 DIV，一个用于“显示的图像”，称为

<div id="fader"></div> /* the shown object */

然后在 HTML 的某个地方，我有一个用户定义的图像列表，要在该推子容器中显示。

图像在我调用的容器中

        <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>

这个列表的大小可能会有所不同，有些有 1 张图片，有些有 20 张... DIV 的原因是有一天我可能会将其从 IMG 更改为其他内容。所以我想抓取 DIV + 所有内容并将这个“DIV”淡入“推子”对象。

解决方案/想法

我试图先将它们收集在一个数组中。通过从fadercontent DIV 中获取列表。

就像是：

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

然后我会从fadercontent中取出第一个项目并替换“#fader”的内容

我发现 $("#fader").html(...) 是我替换内容的方式，而 fadeIn() 将是不透明度推子。

我想不通的是：

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

2）如何设置动画速度。尝试通过 2 秒构建淡入淡出，然后暂停 1 秒，然后 2 秒淡出，替换图像，2 秒淡入（循环）。jQuery.Animate 可能需要吗？

希望有 jQuery 天赋的人会告诉我我需要在这里更进一步。

4

1 回答 1

1

下面的代码将遍历每个子元素faderContent并替换 ... 的 html，fader它会继续运行，并在到达结尾时从头开始

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

工作示例：http: //jsfiddle.net/Jruns/2/

于 2011-01-11T18:15:52.077 回答