0

データ (一度に 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 関数を使用して要素を挿入しようとしましたが、うまくいきませんでした。助けてください。

4

3 に答える 3

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>

この場合、非表示のコントロールを子リストに追加し、ループ内のアニメーションで show を呼び出すことができます

于 2012-11-26T12:46:21.353 に答える
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 に答える