0

我正在接收数据（一次 10 条记录）并将其插入到 div 中的 javascript 循环中

    var a1 = $('.HomeAnnoucement').length;
            var a2 = $('.HomeAnnoucement').length;
            for (a1 ; a1 < (+a2 + +data.d.length) ; a1++) {

                var a = a1 - a2;
                var newFormat = '<div class="HomeAnnoucement"><label class="annID" id="archannouncementID' + a1 + '" style="display: none;" /><div class="DateandDelete left"><a class="AnnoucementDate left"><strong>' + data.d[a].EffectiveDate.split('/')[1] + getPostWord(parseInt(data.d[a].EffectiveDate.split('/')[1])) + '</strong> ' + getMonthString(parseInt(data.d[a].EffectiveDate.split('/')[0])) + '</a><div class="clear"></div></div><a class="AnnoucementTitle left"><strong id="archannTitle' + a1 + '" class="bold"></strong></a><div class="clear"></div></div><div class="AnnoucementDescription" id="archannDescription' + a1 + '" style="display:none;"></div>';
                $('#archivedAnnouncements').append(newFormat);
                $('#archannouncementID' + a1).append(data.d[a].ID);
                $('#archannTitle' + a1).append(data.d[a].Title);
                if (data.d[a].Owner != "" && data.d[a].Owner != " ") {
                    $('#archannTitle' + a1).append('<label style="font-weight: normal !important;">&nbsp; by ' + data.d[a].Owner + '</label>');
                }
                var description = data.d[a].Description.replace(/\"/g, "'");
                var div = document.createElement("div");
                div.innerHTML = description;
                var descriptiontext = div.textContent || div.innerText || "";
                $('#archannDescription' + a1).html(data.d[a].Description);
            }

我想在插入行之间添加延迟。这样用户就可以看到网格中的每条记录插入。我尝试使用 display: none 和 fadingIn setTimeOut 函数插入元素，但这不起作用。请帮忙。

4

3 回答 3

0

JQuery .delay() 会帮助你

http://api.jquery.com/delay/

于 2012-11-26T12:48:57.380 回答
0

我已经修改了您现有的代码以隐藏每一行，然后设置延迟和淡入...

var a1 = $('.HomeAnnoucement').length;
var a2 = $('.HomeAnnoucement').length;
for (a1 ; a1 < (+a2 + +data.d.length) ; a1++) {

    var a = a1 - a2;
    var $newFormat = $('<div class="HomeAnnoucement"><label class="annID" id="archannouncementID' + a1 + '" style="display: none;" /><div class="DateandDelete left"><a class="AnnoucementDate left"><strong>' + data.d[a].EffectiveDate.split('/')[1] + getPostWord(parseInt(data.d[a].EffectiveDate.split('/')[1])) + '</strong> ' + getMonthString(parseInt(data.d[a].EffectiveDate.split('/')[0])) + '</a><div class="clear"></div></div><a class="AnnoucementTitle left"><strong id="archannTitle' + a1 + '" class="bold"></strong></a><div class="clear"></div></div><div class="AnnoucementDescription" id="archannDescription' + a1 + '" style="display:none;"></div>');
    $('#archivedAnnouncements').append($newFormat);
    $('#archannouncementID' + a1).append(data.d[a].ID);
    $('#archannTitle' + a1).append(data.d[a].Title);
    if (data.d[a].Owner != "" && data.d[a].Owner != " ") {
        $('#archannTitle' + a1).append('<label style="font-weight: normal !important;">&nbsp; by ' + data.d[a].Owner + '</label>');
    }
    var description = data.d[a].Description.replace(/\"/g, "'");
    var div = document.createElement("div");
    div.innerHTML = description;
    var descriptiontext = div.textContent || div.innerText || "";
    $('#archannDescription' + a1).html(data.d[a].Description);
    $newFormat.hide().delay(a * 500).fadeIn();
}
于 2012-11-26T12:49:25.350 回答
0

使用带有动画的 JQuery Show

这是上面引用的示例页面

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

      <p style="display: none">Hello  2</p>
<script>
    $("button").click(function () {
    $("p").show("slow");
    });
    </script>

</body>
</html>

在这种情况下，您可以将隐藏控件添加到子列表中，并在循环中调用带有动画的显示

于 2012-11-26T12:46:21.353 回答