Jquery parse JSON and append after delay
I have the following code:
function loadTweets() {
$('#mainForm').submit(function(){
return false;
});
$('#send').click(function(){
$('#tweets').html('');
var searchTerm = $('#search').val();
var baseUrl = "http://searc开发者_开发百科h.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> ' + 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
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> ' + 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.
精彩评论