Question

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

    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函数插入元素，但这不起作用。请帮忙。

Answer 1

使用JQuery Show with animation

以下是

上面引用的表格页面示例

<!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>

在这种情况下，您可以向子列表添加隐藏控件，并在循环中调用show with animation

Answer 2

JQuery .delay（）会帮助你

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

Answer 3

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

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();
}

在行中插入数据之间添加延迟

3 个答案: