jQuery JSON fadein - not working?

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!

Possible duplicate: http://stackoverflow.com/q/1490563/1026459 , also probable lack of any troubleshooting. — Travis J, Feb 01 '13 at 19:46

score 3 · Accepted Answer · answered Feb 01 '13 at 19:45

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

Thanks Jake, it looks so simple with your explanation but I just couldn't work it out on Friday night. Thank you! — BrochanGuMor, Feb 04 '13 at 10:41

score 1 · Answer 2 · answered Feb 01 '13 at 19:44

1

You need to fade it out before you can fade it back in again!

fadeIn and fadeOut only change the visibility of an element. They don't do anything when the content changes.

answered Feb 01 '13 at 19:44

Matt Burland

44,552
18
99
171

score 1 · Answer 3 · answered Feb 01 '13 at 19:50

1

Just do one thing in css:

#tweetblock{
   display:none;
}

Then fadeIn() will occur.

answered Feb 01 '13 at 19:50

Jai

74,255
12
74
103

jQuery JSON fadein - not working?

3 Answers3