Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wneo

Fade in com Ajax

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tanta assim para aplicar o fadeIn.

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.