Fade in com Ajax

[wneo 5]

Boa noite!

 

Estou montando um site onde vou precisar utilizar ajax. Nesse site tem um banner fullwidth. Consegui implementar um ajax. Infelizmente com jquery não deu certo. Consegui somente da forma mais primitiva. Alguém sabe como implementar nessa forma, um efeito de fadeIn pra quando o conteudo for carregado?

 

Vou colocar o codigo abaixo, quem souber me dizer como encaixar o fadeIn ou alguma solução alternativa també é bem vinda:

function abrirPag(valor){
    var url = valor;

    xmlRequest.open("GET",url,true);    
    xmlRequest.onreadystatechange = mudancaEstado;
    xmlRequest.send(null);

        if (xmlRequest.readyState == 1) {
            document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
        }

    return url;
}

function mudancaEstado(){
    if (xmlRequest.readyState == 4){
        document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
    }
}

[Marlon Pacheco 132]

Buenas tchê.

 

Já tentou fazer assim?

	$("#loading").ajaxStart(function(){
		$(this).show();
	});
	$("#loading").ajaxComplete(function(){
		$(this).hide();
	});	

Aí você coloca o seu gif dentro de um elemento com id #loading;

[wneo 5]

Buenas tchê.

 

Já tentou fazer assim?

	$("#loading").ajaxStart(function(){
		$(this).show();
	});
	$("#loading").ajaxComplete(function(){
		$(this).hide();
	});	

Aí você coloca o seu gif dentro de um elemento com id #loading;

Bom dia Marlon!

 

Obrigado pelo apoio aí!!!

Acabei fazendo com o Método load do jquery. Utilizei um comando noConflict para corrigir o conflito de versões de biblioteca que estavva dando. Começou a funcionar corretamente.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

<script type="text/javascript">
    var $JQuery = jQuery.noConflict()
</script>

<script>

$(document).ready(function(){
$("#clique").click(function() {
$("#conteudo").fadeIn("3000").load("mais1.html");});
});
</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

<script type="text/javascript">
    var $JQuery = jQuery.noConflict()
</script>

<script>

$(document).ready(function(){
$("#clique").click(function() {
$("#conteudo").fadeIn("3000").load("mais1.html");});
});
</script>

Só o fadeIn, que não tá operando... coloquei "slow"..depois "3000" para ver se conseguia..funcionou o ajax com jquery,mas não deu o efeito fade...Quando utilizo em outra página, funciona da forma que coloquei acima...mas não em harmonia com a página que estou usando o parallax.

[Marlon Pacheco 132]

Tanta assim para aplicar o fadeIn.

$('#conteudo').fadeOut('slow', function(){
    $('#conteudo').load("mais1.html", function(){
        $('#conteudo').fadeIn('slow');
    });
});

[wneo 5]

 

Tanta assim para aplicar o fadeIn.

$('#conteudo').fadeOut('slow', function(){
    $('#conteudo').load("mais1.html", function(){
        $('#conteudo').fadeIn('slow');
    });
});

Tentei implementar sua idéia assim:(mas não deu certo - Lembrando que preciso com o conteudo externo venha quando eu clicar em um botão):

<script>

$(document).ready(function(){

$("#clique").click(function() {
$("#conteudo").fadeIn("3000").load("mais1.html");

$('#conteudo').fadeOut('slow', function(){
    $('#conteudo').load("mais1.html", function(){
        $('#conteudo').fadeIn('slow');

});
});


   
</script>

[Marlon Pacheco 132]

No console do navegador não retorna nenhum erro?

Dei uma organizada no teu código. Algumas chaves não estavam fechadas.

<script>
$(document).ready(function(){
  $("#clique").click(function() {
    $('#conteudo').fadeOut('slow', function(){
      $('#conteudo').load("mais1.html", function(){
        $('#conteudo').fadeIn('slow');
      });
    });
  });
});
</script>

[wneo 5]

 

No console do navegador não retorna nenhum erro?

Dei uma organizada no teu código. Algumas chaves não estavam fechadas.

<script>
$(document).ready(function(){
  $("#clique").click(function() {
    $('#conteudo').fadeOut('slow', function(){
      $('#conteudo').load("mais1.html", function(){
        $('#conteudo').fadeIn('slow');
      });
    });
  });
});
</script>

Marlon, perfeito!!! Com a sua correção funcionou perfeitamente, obrigado!!!!

 

 

Pelo que percebi você manja bastante de jquery, eu abri um outro tópico sobre uma duvida que tenho em um banner parallax que estou usando, no modo auto play, e preciso que ele pare quando o mouse estiver em cima, e volte quando tirar o mouse, dá uma olhada lá quando puder brother...

 

Obrigado!!!