Javascript and Threads (I think?)

I really need some help, I am slowly going insane, I have just started writing javascript and I am looking at lots of tutorials and lifting useful code. Something that I really need help with though I cannot find anywhere. Heres the scenario.

1. Call a function fadeout() - This will fade out an image on the screen

2. Then I do something like
document.getElementById("mainPicture").innerHTML='<img src='+anyimage+'.jpg" border="0">'; - This changes the image that was displayed

3. Then I fade in fadein() a new image.

However step 2 always kicks in before step 1 has finished so I get no fade out, the image just appears and then fades in.

Has this to do with JS threading or am I just going crazy.

And more importantly does anyone know what can de done so that this works as expected?

Thanks folks.
SanjayC

 

I would try the flowing steps:
1. Fade out the picture
2. Call the setTimeout function with 2 parameters:

1. A function with the innerHTML replacement + the fade in function
2. Time in milliseconds (3000 for example)

Using the setTimeout function will cause your code to be delayed in it's execution - this will give time to the fade out effect to be completed.