Fading in new paragraphs

i'm working on some kind of twitter new ticker using jquery and i'm stuck on a visual effect. I have all the tweets i wan开发者_JS百科t to show formatted as strings stored into an array. The strings are like this:

<p><a href="http://twitter.com/user">user</a>: tweet text</p>

I would like to have the paragraph added to the container DIV one at a time, with some kind of fade in effect, like the one you get in the example when you click on the button: http://jsbin.com/uneso (example is from here).

I've tried using the code from the example and i wrote this:

for (i=0; i<tweetsArray.length; i++){

var tweetTmp = tweetsArray[i]; $(displayContainer).append(tweetTmp).fadeIn("slow");

}

But it looks like all the appends get done together and then one single fadeIn() effect is applied to the whole div.

Any idea why it does behave like this?

Thanks in advance, Marcello

P.S. I've tried looking at this too but i still couldn't solve my problem.

Your code is looping through without waiting for the fades to occur. If you want to wait for each fade to occur before appending the next div, you'll need to either use the fadeIn completion callback (my preferred solution) or delay adding them (the favorite of some others I respect).

Here's are rough examples:

Using the completion callback:

var tweetArray = [
  "This is tweet 1",
  "This is tweet 2",
  "This is tweet 3",
  "This is tweet 4"
  ];

$("#btnGo").click(function() {
  appendAndFade(document.body, tweetArray);
});

function appendAndFade(parent, tweets) {
  var index;

  index = 0;
  doOne();

  function doOne() {
    if (index < tweets.length) {
      $("<p>")
        .html(tweets[index++])
        .hide()
        .appendTo(parent)
        .fadeIn(doOne);
    }
  }
}

Live copy

Note how we use the callback on fadeIn to trigger the next append-and-fade-in (doOne).

Using delay:

var tweetArray = [
  "This is tweet 1",
  "This is tweet 2",
  "This is tweet 3",
  "This is tweet 4"
  ];

$("#btnGo").click(function() {
  appendAndFade(document.body, tweetArray);
});

function appendAndFade(parent, tweets) {
  var index;

  for (index = 0; index < tweets.length; ++index) {
      $("<p>")
        .html(tweets[index])
        .hide()
        .delay(index * 400)
        .appendTo(parent)
        .fadeIn(400);
  }
}

Live copy

The fadeIn() method behaves asynchronously: it queues the animation and immediately returns to the caller. You can use its last argument to provide a callback function that will be called when the effect completes.

So, with a little refactoring, you can do something like:

function fadeTweet(tweets, index, displayContainer)
{
    if (index >= tweets.length) {
        return;
    }

    $("<p>" + tweets[i] + "</p>").appendTo(displayContainer).fadeIn("slow",
        function() {
            fadeTweet(tweets, index + 1, displayContainer);
        });
}

fadeTweet(tweetsArray, 0, $(displayContainer));

Try something like this: http://jsfiddle.net/Rbm7Q/ - example working code.

Some code to see can be found below:

$(document).ready(function(){
    var elk = new Array('<p><a href="http://twitter.com/user">user</a>: tweet text 1</p>', '<p><a href="http://twitter.com/user">user</a>: tweet text 2</p>');

function appEl(_id) {
    if (elk[_id] != undefined) {
        $('#testHolder').append(elk[_id]);
        $('#testHolder p:eq(' + _id + ')').hide().fadeIn("slow", function(){
            _id = _id + 1;
            if (elk[_id] != undefined) {
                appEl(_id);
            };
        });
    }
}
appEl(0);
});

I think the fadeIn() should be applied to the appened paragraph.

$.each(tweetsArray, function(i, tweet){
    $(displayContainer).append( $(tweet).css('display', 'none').fadeIn() );
});  

I'm not sure you're array is compatible with "$(tweet)",
if not try to wrap the tweet in a <p> like

$('<p>', {'html': tweet}).css('display', 'none').fadeIn();