[Resolvido] Carregando dinamicamente com fade

[Paulo Hidenari 0]

Olá pessoal! Sou novo no fórum, e essa é minha primeira postagem...

 

Estou desenvolvendo um site simples no qual carrego dinamicamente o conteúdo dos links do menu em uma div (#conteudo)... para melhorar o visual coloquei um efeito fadeOut() antes de chamar o link e um fadeIn() depois de chamar o link... ambos funcionando!

 

O problema é que quando o link é clicado a mudança de pagina acontece ao mesmo tempo do fadeOut, e depois volta a aparecer com o fadeIn! Gostaria que esses eventos acontecessem um após o outro e não ao mesmo tempo!

 

 

Ajax que carrega o conteúdo e da o fade:

 

$(function(){
$("#carregando").hide();
	$("#topo a").click(function(){
		pagina= $(this).attr('href')

		$("#carregando").ajaxStart(function(){
			$(this).show();
			$("#conteudo").fadeOut("slow");
		})
		$("#carregando").ajaxStop(function(){
			$(this).hide();
			$("#conteudo").fadeIn("slow");
		})
	$("#conteudo").load(pagina)
	return false;
	})
})

 

 

 

Alguém pode me ajudar? Abraço a todos!

[William Bruno 1501]

dispare um no callback do outro.

http://api.jquery.com/fadeOut/

[Paulo Hidenari 0]

Tentei aplicar dessa forma no callback... mas ai parou de funcionar o efeito! E ele abre o link não na div #conteudo que eu havia indicado mas como um link normal!

 

Sabem me dizer o que eu fiz de errado!?

 

$(function(){
$("#carregando").hide();
	$("#topo a").click(function(){
		pagina= $(this).attr('href')

		$("#carregando").ajaxStart(function(){
			$(this).show();
		})

		$("#carregando").ajaxStop(function(){
			$(this).hide();
			$("#conteudo").fadeIn("slow");
		})
		$("#conteudo").fadeOut("slow", function(){
		$("#conteudo").load(pagina);return false;})
		})
})

 

Abraço!

[William Bruno 1501]

Fiz um exemplo aqui:

 

http://www.wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

[Paulo Hidenari 0]

Fiz um exemplo aqui:

 

http://www.wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

 

Cara...!!! Ótimo!!! Muito melhor dessa forma que está no seu post!

 

vlw mesmo! Abraço! Pode por um resolvido ai!!! rs!

[Paulo Hidenari 0]

No final acabei ajustando um pouco o código pra chegar onde eu queria... Então pra quem precisar o código ficou assim:

 

<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>

 

Agradeço novamente ao Willian! Abraço a todos!