Question

I have the following code:

function loadTweets() {
    $('#mainForm').submit(function(){
        return false;
     });  

    $('#send').click(function(){
                $('#tweets').html('');
                var searchTerm = $('#search').val();
                var baseUrl = "http://search.twitter.com/search.json?q=";
                $.getJSON(baseUrl + searchTerm + "&callback=?", function(data) {
                console.log(data);
                $.each(data.results, function() {
                $('<div></div>')
                .hide()
                .append('<img src="' + this.profile_image_url + '" />')
                .append('<span><a href="http://www.twitter.com/'
                +
                this.from_user + '" target="_blank">' + this.from_user
                +
                '</a>&nbsp;' + this.text + '</span>')
                .appendTo('#tweets')
                .delay(800)
                .fadeIn();
                });
            }); 

    });
}
$(document).ready(function() {
   loadTweets();
});

The code works fine but i want to append to the div ‘tweets’, the data from the JSON but not all at once, i want it step by step, can you give me an idea pls.Best regards

Answer 1

You can add more delay based on the index, like this:

$.each(data.results, function(i) {
  $('<div></div>').hide()
    .append('<img src="' + this.profile_image_url + '" />')
    .append('<span><a href="http://www.twitter.com/' +
             this.from_user + '" target="_blank">' + this.from_user +
             '</a>&nbsp;' + this.text + '</span>')
    .appendTo('#tweets')
    .delay(800 + 200 * i)
    .fadeIn();
});

The first parameter to the .each() callback is the index, 0 based, so in the above code the first tweet fades in in 800ms, the next 200ms later, etc. Just fine tune the numbers as needed.