jQuery fadeIn对阵列元素一次

时间:2014-10-15 01:06:00

标签: jquery

我有一个数组

var myarray = [ "A", "B", "C", "D", "E" ];

我希望每个元素都放在

之间
<H1> </H1>

然后让它一次淡出一个。首先消失,然后B,C,D,E一次开始淡入淡出。目前一切都出现了。

jsfiddle在这里

http://jsfiddle.net/c2hsmb2h/2/

我在这里缺少什么?感谢

2 个答案:

答案 0 :(得分:0)

请参阅http://jsfiddle.net/c2hsmb2h/3/

将项目设为隐藏

list = list + "<H1 class='page1class' style='display:none;'>"+entry+"</H1>";    

然后将它们添加到div中,之后将它们淡入。您没有将它们作为隐藏启动它们并且在将它们淡入它们之后将列表添加到div中,因此它们在添加到div时都已经可见。

答案 1 :(得分:0)

http://jsfiddle.net/c2hsmb2h/4/

你可以编写一个接受延迟参数的基本函数,并使循环增量值......好吧,看看代码......

var myarray = [ "A", "B", "C", "D", "E"];

function addElement(elem, delay)
{
    setTimeout(function(){
        $('<h1>').css('opacity', 0).text(elem).appendTo($("#mydiv")).animate({opacity:1}, 500);
    }, delay);
}

$("#thisbutton").click( function(){
    $("#mydiv").empty();
    $.each(myarray, function(i,v){
        addElement(myarray[i], i * 200);
    });
});

PS - 你为什么要在同一个父母的h1标签中全部使用它们?想要违反HTML标准或什么?