Question

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');

})

小提琴：http://jsfiddle.net/jonathon/zandA/

Answer 2

理想情况下，这应该在fadeIn的回调上完成。一个简单的黑客就是根据这样的索引来设置延迟。

$.each(arr, function(i) {
    $('<li style="padding-right:30px;padding-bottom:40px;">' + this + '</li>')
        .appendTo(".project_images")
        .hide()
        .delay(i*500)
        .fadeIn(500);
});

在这里演示：http://jsfiddle.net/gothick/GcyVK/1/

Answer 3

这显示了如何遍历一组元素。它可以很容易地应用于阵列（对不起，我现在很急，现在无法完成它）这可能有助于指出你正确的方向。

示例： http://jsfiddle.net/X8swk/2/

<div id="Box1" class="hidden">Test 1</div>
<div id="Box2" class="hidden">Test 2</div>
<div id="Box3" class="hidden">Test 3</div>
<div id="Box4" class="hidden">Test 4</div>

.hidden {
    display:none;
}


var SetToShow = $(".hidden");

ShowBoxs(SetToShow, 0);


function ShowBoxs(BoxSet, i) {
    $(BoxSet[i]).fadeIn("slow", function(){
        i++;
        ShowBox(BoxSet, i);
    });
}

基本上它在元素中淡化，完成后它会再次使用下一个索引调用它自己。

Answer 4

.fadeIn（）有一个可选的回调参数，允许你在fadeIn动画完成时执行一个函数。您可以按顺序使用它来淡化元素：

$("#img1").fadeIn("slow", function(){
  $("#img2").fadeIn("slow", function(){
    $("#img3").fadeIn("slow", function(){
      $("#img4").fadeIn("slow");
    });
  });
});

等

fadeIn每个列表值有延迟

5 个答案: