Prevent browser from loading new page until fade is finished.

Prevent browser from loading new page until fade is finished.

Hi, just started using jQuery today.

I have a site where the header, footer, menu and Google map remain present on most pages, but the copy in the main paragraph changes depending on which menu option is selected.

The above is achieved using PHP includes and query strings.

I'm using jQuery to 'fade in' the main body text when a page loads, and 'fade out' the text when a menu link is clicked on. It just looks nice, because all the stuff that is always present stays in place (I guess the browser caches it?) and just the main body text fades out and the new fades in.

The thing is, the 'fade out' that is triggered by the 'click' event (on the menu link) tends to be interrupted by the browser moving on to the new page. I just want to the browser to stay for half a second so that the nice fade finishes properly. Ironically, when my connection is interrupted or the new page loads slowly, it looks at its best because the fade has time to finish.

Is there a way I can code to stop the browser from moving on until my fade is done?

Thanks