So I was watching the BBC streaming broadcast of the obama mccain live debate and they had live commentary using what i presume was ajax.

The new commentary entries faded in and animated nicely on top of the others.

How would one achieve this one?

Notably using jquery.

The most important thing to note, is that your script won't be able to receive messages, it can only check for the existence of new information on a regular basis. Therefore, to load the "commentary", or whatever you want to load on an incremental basis, will have to be checked for regularly with the setInterval method:

$(document).ready(function() {
var intervalId=setInterval(function() {
    $("#commentary").load("commentary.php"); //load remote content into the #commentary div
}, 2000); //checks every 2 seconds for content
});

You could get a bit fancier, and check to see if the new data matches the old data, then only loading it if it doesn't, but if you are only loading a small amount of data, this shouldn't matter too much.

You may also want a way to end the setInterval loop, so it will stop checking for new content if it receives content like END OF COMMENTARY, or something like that. To end the loop you would say clearInterval(intervalId);

Of course, fading or animating is a different matter, but that is easy enough to manage with jQuery.