javascript - jQuery AJAX JSON 自动刷新使用动画显示数据不起作用

Question

我使用 AJAX 和 JSON 进行 jQuery 自动刷新。

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

该函数将显示 id #d1 的数据

现在我在显示数据时有 jQuery 动画。

$(window).on('load', function() {
        function AnimateList($listItems, index, callback) {
            if (index >= $listItems.length) {
                $listItems.closest("ul").fadeOut(function() {
                    $listItems.css("opacity",0); //reset
                    callback(); //next list
                });
                return;
            }

            $listItems.eq(index).animate({left:0, opacity:1},2000, function() {
                AnimateList($listItems, index+1, callback)
            });
        }

        function FadeLists($lists, index) {
            if (index >= $lists.length) index = 0;

            var $currentList = $lists.eq(index);
            $currentList.fadeIn(function() {
                AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
            }) 
        }

        var $allLists = $("ul")
        FadeLists($allLists, 0);
    });

页面加载时，不显示数据(数据将使用该动画显示)。

您可以看到此示例动画 fiddle

HTML

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

Answer 1

您只需在每次 ajax 加载后调用 FadeList，而不是在文档加载时调用。这里我删除了 ajax 部分，但这是同一件事:

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>