1

我想让<div>'#it1', '#it2', '#it3' ... '#itX' 在页面加载时以随机顺序一一加载（出现）。

得到这个脚本：

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 以随机顺序一个接一个或一个接一个（直接）出现。这段代码的关键就在这里。

4

4 回答 4

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/

于 2013-09-29T09:08:24.660 回答
0

首先，您必须将不透明度设置为 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);
                    });
                });
            });
        });
    });
于 2013-09-29T09:20:36.850 回答
0

在我看来，如果你想保持当前的结构，你可以在选择器中找到与正则表达式相似的 id并应用你的 css 不透明度更改。

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

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

于 2013-09-29T09:31:33.640 回答
0

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

            var i = 1;
        $.each($("div[id^='it']"), function () {
            $(this).delay(1000 + (i * 100)).animate({ 'opacity': '1' }, 1000);
            i++;
        });
于 2013-10-01T08:51:54.720 回答