Question

我在foreach循环中使用jquery $("#" + theidoftheelement).animate(...)，以便在一个元素之后设置动画，但只有最后一个动画才有效... 请帮忙！

编辑：更多代码：（txt是文件中的smome文本）

 txt.forEach(function (lcb) {
                    lcb = lcb.split("   ", 30);

                    var header = document.createElement('h3');
                    header.id = 'Infralist_' + lcb[2];
                    header.className = 'Infraa';
                    header.textContent = lcb[2];
                    document.getElementById("MainContent_Infralist").appendChild(header);

                    $('#' + lcb[2]).animate({ opacity: "1" }, 500);

                window.scrollTo(0, document.body.offsetWidth);
                initlist(runstr);};`

Answer 1

为每次迭代使用setTimeout运行你的动画循环。

代码：

$("#animator").click(function () {
    $('.demo').each(function (index) {
        var self = this
        setTimeout(function () {
            $(self).animate({
                opacity: 0.25,
                left: "+=50",
                height: "toggle"
            });
        }, index * 500);
    });
});

演示：http://jsfiddle.net/IrvinDominin/XFJXd/

Answer 2

立即行动：

var runningvar =-1;
var interval = setInterval(function () {
                    ++runningvar;
                    if (runningvar >= txt.length) {
                        interval = null;
                    }
                    var lcb = txt[runningvar];
                    lcb = lcb.split("   ", 30);

                    var header = document.createElement('h3');
                    header.id = 'Infralist_' + lcb[2];
                    header.className = 'Infraa';
                    header.textContent = lcb[2];
                    document.getElementById("MainContent_Infralist").appendChild(header);

                   document.getElementById("Infralist_" + lcb[2]).style.visibility = "visible";
                    document.getElementById("Infralist_" + lcb[2]).style.opacity = "1";
                    $('#' + "Infralist_" + lcb[2])

                        .hide()
                        .fadeIn(500, function () { });

                    ///////
                }, 500);

Jquery似乎无法覆盖css属性，因此我将所有设置为可见，然后使用jquery再次隐藏它 - 然后将其淡入（我添加了一个Interval）

编辑：实际上这不起作用他们都显示了，但是只是最后一个动画，但现在它可以了：我用$('#' + "Infralist_" + lcb[2])替换了这个$(document.getElementById("Infralist_" + lcb[2]))

Jquery动画循环只有最后一个元素

2 个答案: