jQuery AJAX JSON Autorefresh Anzeige Daten mit Animation funktioniert nicht

Question

Ich habe jQuery Autorefresh mit AJAX und JSON.

setInterval(function() 
    { 
     $.ajax(
     { 
      url: "d1", 
      type: "POST", 
      dataType: "JSON", 
      success: function (jsonStr) 
      { 
       var n = jsonStr.length; 
       var html = "<ul class='table2'>"; 

       for(var x = 0; x < n; x++) 
       { 
        //alert(jsonStr[x].badgeID); 
        html += "<li><div class='td' style='width: 10%; text-align: center; border-right: 3px solid #455f51;'>" + jsonStr[x].badgeID + "</div><div class='td' style='width: 40%; border-right: 3px solid #455f51;'>" + jsonStr[x].employeeName + "</div></li>" ; 
       } 

       $("#d1").html(html); 
      } 
     }); 
    }, 3000); 

Diese Funktion wird die Daten zu id # d1

sein anzeigen Und jetzt habe ich jQuery Animation, wenn die Daten sehen sein.

Wenn die Seite geladen ist, werden die Daten nicht angezeigt (die Daten werden mit dieser Animation angezeigt).

Beispiel Animation, die Sie zu diesem fiddle

HTML

<div id="d1"></div> 

Answer 1

Sie müssen nur Ihren FadeList nach jedem Ajax-load, nicht auf dem Dokument laden sehen. Hier entfernte ich die Ajax-Teil, aber das ist das gleiche:

function getList() 
 
    { 
 
    var jsonStr = [0,1,2,3,4] ; 
 

 
    var ul = jQuery('<ul></ul>') ; 
 
    jQuery(jsonStr).each(function(k,v) { 
 
     ul.append('<li>'+v+'</li>') ; 
 
    }) ; 
 
    $("#d1").append(ul); 
 

 
    ul.find('li').css({ 
 
     'opacity':0, 
 
     'left':'100%', 
 
    }).each(function(){ 
 
     // For each "li" in your new UL, animate them from right to left. 
 
     // To make them animate 1 by 1, you don't need to have a timeout or a callback : 
 
     // .index() tells you wich li it is (first, second...) in your loop, so you can just animate at 200*index and they will animate from 0 to each 200ms. 
 
     jQuery(this).animate({ 
 
     'opacity':1, 
 
     'left':0, 
 
     },200*jQuery(this).index()) ; 
 
    }) ; 
 
} 
 

 
jQuery(document).on('ready',function(){ 
 
    getList() ; // Call your getList on load 
 
}) ; 
 

 
// Call your getList each 3 seconds 
 
setInterval(getList, 3000) ;

ul{list-style:none; position:relative ; overflow:hidden; } 
 
ul>li { position:relative ;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="d1"></div>