Question

Something is going awry with this code but it’s late and I just can’t figure it out:

var json_object = '.$json_twitter_array.';

function displayTweets(obj){
    $("#tweetblock").html(obj[0].description).fadeIn("slow");
    var i = 1;
    setInterval(
        function(){
            $("#tweetblock").html(obj[i].description).fadeIn("slow");
            i++;
            if(i >= obj.length) i = 0;
        },6000);
}
displayTweets(json_object);

it’s looping through the json object just fine, the problem is the fadeIn is not working, the text is just displayed. Can someone point out where I’m going wrong/missing the obvious?

Many thanks!

Answer 1

The problem is you are fading the object after the content is actual placed. A quick way to get around this is to add a hide() to each element before the html() happens, then the content is added to the hidden area, and then after that fadeIn() kicks in.

So each:

$("#tweetblock").html

Becomes:

$("#tweetblock").hide().html

And the final code should look like:

var json_object = '.$json_twitter_array.';

function displayTweets(obj){
    $("#tweetblock").hide().html(obj[0].description).fadeIn("slow");
    var i = 1;
    setInterval(
        function(){
            $("#tweetblock").hide().html(obj[i].description).fadeIn("slow");
            i++;
            if(i >= obj.length) i = 0;
        },6000);
}
displayTweets(json_object);