4

Estou fazendo um arquivo para carregamento de novas notícias, no entanto, as novas notícias aparecem rapidamente sem uma entrada suave.

Sei que dá para utilizar algo deste tipo:

$(“.containerNews”).append(result).children(':last').hide().fadeIn();

No entanto este código pega apenas a última linha do resultado Ajax, e eu gostaria de fazer o efeito com fadeIn sempre nas últimas incrementações do Ajax.

Meu código está da seguinte forma:

 $(".SeeMoreGame").click(function(){

      $.ajax({
        url:"seeMoreGames.php",
        type:"POST",
        data:{ searchValue: searchValue, numberRows: numberRows },
        success:function(result){
          $(".containerNews").append(result);
        }
      });

  });

Eu consegui achar uma solução para este problema com ajuda de um comentário que esta logo abaixo . Caso alguém entre aqui porque está com o mesmo problema, basta adicionar uma class nos novos resultados que serão exibido, Exemplo:

<li class="hide"></li>

E antes do novo requerimento Ajax você remove esta classe. Exemplo:

 $(".SeeMoreGame").click(function(){
    $(".containerNews li").removeClass("hide");

      $.ajax({
        url:"seeMoreGames.php",
        type:"POST",
        data:{ searchValue: searchValue, numberRows: numberRows },
        success:function(result){
          $(".containerNews").append(result);
          $(".hide").hide().fadeIn();
        }
      });

  });
5
  • 2
    Faça com que os novos elementos venham com uma classe, por exemplo: <div class="hide">...</div>. E então basta utilizar $('.hide').fadeIn('slow') Commented 19/02/2019 às 1:59
  • Mas a questão é, se eu utilizar uma class toda vez que carregar novos elementos tudo que tiver a class vai sofrer o efeito fadeIn de novo. É eu quero só nos novos elementos. por exemplo nos últimos 6 elementos adicionados. Commented 19/02/2019 às 2:04
  • Obrigado pela dica eu consegui fazer mais ou menos do jeito que você falou, eu adicionei a class só que antes de executar o código novamente eu removi ela. Muito obrigado Commented 19/02/2019 às 2:13
  • 2
    que bom que conseguiu. Se possível, poste o código como resposta e reversa sua última edição. Dessa forma, você poderá marcar a questão como resolvida. Commented 19/02/2019 às 2:54
  • Tentei fazer mas não deu certo. Não mexo muito aqui então talvez seja falta praticada minha parte, Por enquanto vou deixar da forma que esta. Commented 19/02/2019 às 5:06

1 Resposta 1

1

Faça o append com os elementos já ocultos (acrescentando display: none com replace), e depois faça o .fadeIn() nos elementos que foram adicionados na lista:

Veja os comentários no código:

$(".SeeMoreGame").click(function(){

      $.ajax({
        url:"seeMoreGames.php",
        type:"POST",
        data:{ searchValue: searchValue, numberRows: numberRows },
        success:function(result){
          // faz um replace no retorno adicionado display: none
          // em todas as LI's
          result = result.replace(/<li/g, '<li style="display: none"');
          $(".containerNews")
          .append(result) // faz o append
          .find(":hidden") // seleciona as LI's ocultas
          .fadeIn(); // faz o fadeIn em todas

        }
      });

});
3
  • Eu já tinha testado este esquema, só que ele faz o fadeIn em só uma <li></li>, e a minha intenção era colocar em 6 de uma só vez. Mas eu já obtive uma solução eu deixei logo acima. Muito Obrigado por tentar ajudar! Commented 19/02/2019 às 16:32
  • Achei que era na última li adicionada.... vou alterar a resposta então, poderá servir para alguém no futuro. A propósito, o campo de perguntas não deve ser usado para colocar respostas. Abs!
    – Sam
    Commented 19/02/2019 às 16:35
  • Dá uma olhada agora.
    – Sam
    Commented 19/02/2019 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .