0

我正在尝试为一个简单的 jQuery 动画计时,以便它在一组 HTML 元素上一个接一个地触发,并在移动到下一组元素之前延迟。使用 jQuery each() 还没有让我走得太远,因为 each() 会立即运行“项目”变量。有没有办法计时,以便在进入下一个“项目”变量之前延迟?

$(document).ready(function() {
    var slideShow = $(".intro-inner");
        if (slideShow) {
        var item = slideShow.find(".item");
        var headLine = item.find("h1");
        var para = item.find("p");
        item.each(function () { 
            if (headLine && para) {
                headLine.css({"opacity": "0", "left" : "-1.25em" });
                para.css({"opacity": "0", "left" : "-12.500em" });
                setTimeout(function() {
                    headLine.animate({"opacity": "1", "left" : "0"}, 4000);
                    para.animate({"opacity": "1", "left" : "0"}, 4000);
                }, 1000); 
            }
        });
    }
});

任何帮助将不胜感激。

4

2 回答 2

1
setInterval(callYouFunction(), time interval in miliseconds)
于 2012-04-26T18:18:07.600 回答
0

.each() will pass the index and the element to its callback function. You may be able to use this.

For instance, multiply the (zero-based) index by the number of seconds you're passing to setTimeout to animate each one a second after the one before it:

    item.each(function (i,el) { 
        if (headLine && para) {
            headLine.css({"opacity": "0", "left" : "-1.25em" });
            para.css({"opacity": "0", "left" : "-12.500em" });
            setTimeout(function() {
                headLine.animate({"opacity": "1", "left" : "0"}, 4000);
                para.animate({"opacity": "1", "left" : "0"}, 4000);
            }, i*1000); 
        }
    });
于 2012-04-26T18:36:39.813 回答