Question

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 want 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.

Answer 1

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