CODEWITHSUNDEEP
jqueryfadeinfadeout
user354134
user354134

Reputation:

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 learning jQuery, and figuring out where my code goes wrong would really help me!

Upvotes: 2

Views: 575

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 2

Anish
Anish

Reputation: 2917

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

Upvotes: 1

nkcmr
nkcmr

Reputation: 11000

try putting your statement in 

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

or putting it in a function then calling that function

Upvotes: 0

Related Questions