jquery - 延迟淡入每个列表值

Question

我希望淡入数组中的每个元素，并与前一个元素稍有延迟，这样它们就不会同时淡入。

这是我的代码:

$(document).ready(function() {
    var arr = ['<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />'];
    $(function() {
        $.each(arr, function() {
            $('<li style="padding-right:30px;padding-bottom:40px;">' + this + '</li>').appendTo(".project_images").fadeIn(500);
        });
    });
})

谁能给点建议吗？

提前致谢

韦恩

Answer 1

动画完成后，您可以使用 fadeIn 上的回调参数来运行一段代码。

在此示例中，我在数组上使用“shift”从数组前面弹出一个项目。然后我添加这个项目，确保它最初是隐藏的并淡入。如果数组中有更多项目，它将调用自身。

$(function() {
    var arr = ["hello", "item", "item2", "another"];

    function fadeInNextItem(el,parent) {
        var item = el.shift();
        if (item) {
            $('<li style="padding-right:30px;padding-bottom:40px;">' + item + '</li>')
               .appendTo(parent)
               .hide()
               .fadeIn(500, fadeInNextItem);
        }
    }

    fadeInNextItem(arr,'.project_images');

})

fiddle :http://jsfiddle.net/jonathon/zandA/