Waiting for content to be loaded before displaying animation

Hello everyone,

i'm new to jQuery

i have managed to make things work how i wanted quite quickly but to be honest jQuery is so easy that i'm not sure i completely understood what i was doing .. but it's working anyways ... well almost ...

I have an empty div into which i load HTML content from another page. When i click a link on the page, the content from the other page should load and then the div should change background color and then be displayed with a fade animation. When i click on another link, the displayed content should fade out and the new content fade in.

Everything works more or less only that when i switch from one loaded content to another, i can briefly see the old content before the new one is displayed, so the DIV fades out, then fades in again with the old content loaded and then only the new content switches in.

I think probably i have my code wrong, could someone have a look ?

1. $(document).ready(function() {
2.                           
3.     var href = $('.bodytext a').each(function(){
4.         var href = $(this).attr('href');
5.             var toLoad = '.html #moContent';
6.             $('#moContent').load(toLoad)                               
7.     });
8.     $('.bodytext a').click(function(){                         
9.         var toLoad = $(this).attr('href')+' #moContent';
10.        
11.         $('#moContent').fadeOut('slow',loadContent);
12.        
13.         function loadContent() {
14.             $('#moContent').load(toLoad,showNewContent())
15.         }
16.                
17.         function showNewContent() {
18.             $('#moContent').fadeIn('slow').addClass('greyBax');
19.         }
20.         return false;
21.        
22.     });
23. });

Thanks in advance for any help with this.

PS, i can't seem to search this forum at all, when i try to search i get a 404 error ...

• Topic Participants

• cs

• kbwood.au