Dont fadeIn till fadeOut completes?

Question

I have three small boxes at the top of the page. When one is hovered over an image below the boxes fades in. When hovering off the box the image fades out. But how would I write it so if they hover on a different box right after the first box it allows the first image to fade out before the second one fades in? Thank you.

$(document).ready(function(){
    $('#top p').mouseover(function(){
        $('#photo1').fadeIn(2000);
    });
    $('#top p').mouseout(function(){
        $('#photo1').fadeOut(2000);
    });
    $('#top2 p').mouseover(function(){
        $('#photo2').fadeIn(2000);
    });
    $('#top2 p').mouseout(function(){
        $('#photo2').fadeOut(2000);
    });
    $('#top3 p').mouseover(function(){
        $('#photo3').fadeIn(2000);
    });
    $('#top3 p').mouseout(function(){
        $('#photo3').fadeOut(2000);
    });
});

Answer 1

Use the complete function to run your code when one function finishes. For example,

$('#top p').mouseover(function(){
    $('#photo1').fadeIn(2000, function(){
        //This will run when the fadeIn is complete
    });
});

Answer 2

Heres your solution. straight after your fadein put the following in.

setTimeout(function(){
        //Your fadeout function here
},3000)

setTimeout sets a delay before executing the function within it.I tried using delay() but didn't work. I'm sure this will work for you.The 3000 is the time(miliseconds) to wait before executing .I usually set it equal to the previous fadein function so that as soon as its done the fadeout starts in the setTimeout piece.I like using setTimeout because it's much broader than the others, and i use it many more ways than a simple fadein fadeout.