How to fade more than one element in the result of an Ajax

Question

How to fade more than one element in the result of an Ajax

Asked 5 years, 7 months ago

Viewed 51 times

4

I am making a file for loading new news, however, new news appears quickly without a smooth entry.

I know you can use something like this:

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

However this code only picks up the last line of the Ajax result, and I would like to do the effect with fadeIn always in the last increments of Ajax.

My code is as follows:

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

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

  });

I managed to find a solution to this problem with the help of a comment that is just below. If someone enters here because they have the same problem, just add a class in the new results that will be displayed, Example:

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

And before the new Ajax requirement you remove this class. Example:

 $(".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();
        }
      });

  });

2

Make the new elements come with a class, for example: <div class="hide">...</div>. And then just use $('.hide').fadeIn('slow')

– Valdeir Psr

2019/02/19 at 01:59
But the point is, if I use a class every time I load new elements everything in the class will fade again. It is I want only in the new elements. for example in the last 6 added elements.

– Tiago Fernandes

2019/02/19 at 02:04
Thanks for the tip I managed to do more or less the way you said, I added the class only that before running the code again I removed it. Thank you very much

– Tiago Fernandes

2019/02/19 at 02:13
2

glad you could. If possible, post the code as a response and reverse your last edit. That way you can mark the issue as solved.

– Valdeir Psr

2019/02/19 at 02:54
I tried to do it but it didn’t work out. I don’t move much here so maybe it’s lack practiced my part, for now I’ll leave it the way this.

– Tiago Fernandes

2019/02/19 at 05:06

1 answer

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-02-19T14:43:17+00:00

Append with the hidden elements (adding display: none with replace), and then do the .fadeIn() items that have been added to the list:

View comments in code:

$(".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

        }
      });

});