Simple Image cross-fade using navigation

Simple Image cross-fade using navigation

Hi there,

I'm working on a simple mouseover function to swap div/image fade IN and OUT and I'm getting this white flicker in between. It seems like the fadeIn waits for the fadeOut to start, hence the flicker. I've searched and found solutions, but can't implement them correctly as I am more of a beginner with JS and jQuery.

Here my code:
        $('#protect').mouseover( function() {
        $('#pgrc-protect').fadeIn(100);
        $('#pgrc-land').fadeOut(100);
        })

I'd like to have the fadeIn and fadeOut happen at the same time so they overlap and create a seamless transition.

Any help?

Thanks,
Andy