jQuery not fading text in and out?

I want to display "goodbye" for 1 second, fade it out, replace it with "hello", and then fade back in. Why doesn't this snippetwork? (jQuery is loaded):

<div id="foo">x</div> 
<script type="text/javascript"> 
$('#foo').fadeOut().html('goodbye').fadeIn().delay(1000).fadeOut().html('hello').fadeIn(); 
</script> 

I'm using the queue correctly, so these commands occur in order (not asynchronously), right?

Full version: http://test.barrycarter.info/stacked1.html

EDIT: Thanks to everyone who answered! I appreciate the alternate suggestions. I guess my real question was "why doesn't my code work?" I'm l开发者_高级运维earning jQuery, and figuring out where my code goes wrong would really help me!

You want to make the fadeIn part of the callback function of fadeOut. So...

$('#foo').fadeOut('slow', function(){
    $('#foo').fadeIn('slow').html('Hello');
});

Change slow to 1000 for 1 second or whatever is desired.

http://jsfiddle.net/qK26W/

I have tried your code.just look at this fiddle:http://jsfiddle.net/anish/cZf6g/

try putting your statement in

$(document).ready(function(){
    /*code here*/
}); 

or putting it in a function then calling that function