让DIV子项逐个出现或​​随机出现在页面加载上

Question

我想让<div>'＃it1'，'＃it2'，'＃it3'...'#itX'在页面加载时以随机顺序逐个加载（显示）。< / p>

有这个脚本：

var max = $('#line1').children().length;
var ctr = 1;   
$('#itbg div').css('opacity','0');
setTimeout(delay,1000);
function delay(){
$('#it' + max).delay(1000).css('opacity','1'); // works Only for the Last DIV (#itX)
$('#it' + ctr).delay(1000).css('opacity','1'); // works Only for the First DIV (#it1)
}

像这样的HTML

<div id="line1">
<div id="item">
<div id="itbg">
<div id="it1">content</div>
</div>
</div>
<div id="item">
<div id="itbg">
<div id="it2">content2</div>
</div></div>
<div id="item">
<div id="itbg">
<div id="it3">content2</div>
</div></div>
</div>

我必须通过哪种方式来弄明白？我需要＃it1，＃it2，＃it3 ..＃itX以逐个随机顺序出现或者一个接一个地出现（直接）。这段代码的小提琴是here。

Answer 1

您必须收集商品清单，然后加扰清单，然后显示商品：

var max = $('#line1').children().length;
var ctr = 1; 
var i,j,k,t,next;

// items in order (ex. [1,2,3,4,5,6])

var itms=[];
for(i=1;i<=max;i++)
    itms.push(i);  

// now scramble the items randomly (ex. [6,2,3,1,2,4,5])

for(i=0;i<max;i++)
{          
    // choose two items randomly
    j = Math.floor(Math.random() * max);
    k = Math.floor(Math.random() * max);
    // swap
    t = itms[j];                
    itms[j] = itms[k];
    itms[k] = t;
}

// fade in one item at time (following the scrambled list)

fadeIn(0, max, itms);

function fadeIn(current, max, itmsList)
{
    $('#it' + itmsList[current]).fadeIn(1000);
    if(current<max)
    {
        setTimeout( function() {fadeIn(current + 1,max,itmsList);}, 1000);
    }
}

请注意，您的html中存在错误：更多具有相同 ID

的元素

像这样改写：

<div id="line1">
    <div class="item">
        <div class="itbg">
            <div id="it1">content1</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it2">content2</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it3">content3</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it4">content4</div>
        </div>
    </div>
    <div class="item">
        <div class="itbg">
            <div id="it5">content5</div>
        </div>
    </div>
</div>

最后调整您的CSS，使得 itbg 类的项目最初不可见。

.itbg div {
    border:1px solid grey;
    display: none;
}

请参阅http://jsfiddle.net/pV55k/

Answer 2

首先，您必须将不透明度设置为0 然后你可以在一秒钟内将它改为“1”，所以它会是这样的： 如果您已将不透明度更改为零，则可以消除将不透明度更改为零的代码：D 这个Jquery只适用于你的HTML：D

 $(function () {
        max = new Array();
        $.each($('#line1 > #item > #itbg').children(), function () {
            //here it change the opacity to ZERO
            $(this).animate({'opacity' : '0'},1);
            max.push($(this));
        });

      $(max[0]).animate({ 'opacity': '1' }, 1000, function () {
            $(max[1]).animate({ 'opacity': '1' }, 1000, function () {
                $(max[2]).animate({ 'opacity': '1' }, 1000, function () {
                    $(max[3]).animate({ 'opacity': '1' }, 1000, function () {
                        $(max[4]).animate({ 'opacity': '1' }, 1000);
                    });
                });
            });
        });
    });

Answer 3

在我看来，如果你想保留当前结构，你可以找到与regex in the selector类似的ID并应用你的css不透明度变化。

function delay(){
    $("div[id^='it']").delay(1000).css('opacity','1');
}

我希望这会有所帮助。不幸的是，jQuery没有这么好的正则表达式，所以你不能找到它+一个数字，所以它搜索以'it'开头的字符串。

Answer 4

这个不会影响您的IT数量您可以拥有1000个：D

            var i = 1;
        $.each($("div[id^='it']"), function () {
            $(this).delay(1000 + (i * 100)).animate({ 'opacity': '1' }, 1000);
            i++;
        });