Carregamendo de 2 Div's com Ajax com efeito Fade

[Kahlil Barbosa 1]

Bom dia!
dei uma pesquisada aqui no fórum e a solução que eu achei era para "aplicação" de fade ao carregar apenas uma div por ajax.
sou bem leigo nesse assunto de ajax, então provavelmente a "coisa" que eu quero deve ser mais simples do que eu penso...

 

 

tenho o seguinte código, o qual, ao clicar em um link do menu, ele carrega uma página em suas respectivas div, no casa, ttexto e contexfado...

jQuery(document).ready(function(){  
    var ttexto = $('div.ttexto');  
    var contexfado = $('div.contexfado');
		
    request( 'index.html'); 
      
    function m_load( data )  
    {  
        var text = $( '<div>'+data+'</div>' );//forçando o parser  
          
        ttexto.html( text.find('div.ttexto').html() );  
        contexfado.html( text.find('div.contexfado').html() );
		
	}	
		           	
    function request( file )  
    {  
        $.ajax({  
            url: file,  
            success: function( data )  
            {  
                m_load( data );  
            }  
        });
    } 
	loading = new Image(); loading.src = 'loading.gif';
    $('div.menu a').click(function( e ){  
        e.preventDefault();  
        request( $( this ).attr('href') ); 
		contexfado.html( '<img src="loading.gif" hspace="325px" vspace="150px" />' );
		
		
	
	$('div.contexfado').load('lightbox.html', 
			function(){
				$('a[@rel*=lirios]').lightBox();
				$('a[@rel*=tulipas]').lightBox();
				$('a[@rel*=callas]').lightBox();
				$('a[@rel*=glad]').lightBox();
				$('a[@rel*=orqui]').lightBox();
				$('a[@rel*=ranun]').lightBox();
			}
		);
	
    });  
});

 

O que eu preciso é do seguinte, ao clicar, os dois conteúdos saiam em fade(fadeOut) e entrem em fade(fadeIn). Ou simplesmente apenas entrem em fadein

 

Achei esse código aqui no fórum, porém não consigo "encrementar" no meu. O máximo que consegui é

o fadeOut, poré como as divs tem um background-img, ela some junto....

<script type="text/javascript">
$(document).ready(function(){
                //ícone de carregando está em uma div #carregando já posicionado na página 
		$("#carregando").hide();
        var content = $('#conteudo');
  
        $('#topo a').live('click',function( e ){ 
                        			$("#carregando").fadeIn("slow");
			e.preventDefault();
			content.fadeOut("slow");			
  
            var href = $( this ).attr('href');  
            $.ajax({  
                url: href,  
                success: function( response ){  
                    //forçando o parser  
                    var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();    
                    //Apaga o content, carrega os dados, fadeIn no content e fadeOut na div #carregando   
             content.fadeOut("slow", function(){  
             content.html( data ).fadeIn("slow");$("#carregando").fadeOut("slow");});}  
            });  
  
        });
	});
</script>

 

 

 

 

[Progjunior Daniel 34]

É mais facil colocar fadeToggle.

Assim:

$('div.menu a').click(function(){  
   $('div.ttexto').fadeToggle();
   $('div.contexfado').fadeToggle();
 );

 

isso resolveria?