I am recieving data (10 records at a time) and inserting it in a div in a javascript loop

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

```

I want to add delay in between inserting the rows. So that the user could see each record insertion in the grid. I have tried inserting the elements with display: none and fadingIn setTimeOut function but that didnt work. Please help.