Question

以下代码使用模板根据记录数组显示div。它在大多数情况下工作正常。我还添加了一个动画来显示行。但所有行都在一起执行动画。

我们如何修改它以仅在第一行完成后使用较慢的动画启动第二行渲染。无论是jQuery还是Bootstrap解决方案都可以。

更新：我也试过“链接”方法 - 但这不起作用。 Fiddle 2

HTML

<body>
  <script id="template" type="text/html">
  <div style="border:1px solid silver; float:left; min-height:55px; width:500px;background-color:white;margin:5px 1px 1px 1px; display:none;">
  {CostTypeName}-{Quantity}-{ServicePeriodEndDate}
  </div>
  </script>

  <a id="lnkGetServiceCharges" class="btn icon-btn btn-primary" href="#" style="font-size:20px;">
                    <span class="glyphicon btn-glyphicon glyphicon-save img-circle text-primary"></span>
                  Click to Run Demo &nbsp;  &nbsp;  &nbsp;
  </a>

      <div id="divContainer">
      </div>

</body>

的jQuery

var result =[{"CostTypeName":" Cost1","Quantity":1.00,"ServicePeriodEndDate":"\/Date(1514678400000)\/"},{"CostTypeName":"Cost2","Quantity":0,"ServicePeriodEndDate":"\/Date(1488499200000)\/"},{"CostTypeName":"Cost3","Quantity":2,"ServicePeriodEndDate":"\/Date(1488499200000)\/"}
]

var template = $('#template').html();

function render(template, data) {
  var patt = /\{([^}]+)\}/g;
  return template.replace(patt, function(_, key) {
    return data[key];
  });
}

  $(document).ready(function() {

            $("#lnkGetServiceCharges").click(function (event) {
                fireDemo();
                event.preventDefault();
            });

        });

function fireDemo()
{
  $.each(result, function(index,item) 
  {        
      //alert(item.CostTypeName);
      var divRef = render(template, item);
      $(divRef).appendTo('#divContainer').show('slow');
  });
}

Answer 1

你正在触发循环中的所有动画，这些动画似乎都会在同一时刻触发，因为循环迭代速度如此之快。您可以尝试超时，或者您可以重新设计代码，以便它们一个接一个地进行：

function fireDemo()
{

      //alert(item.CostTypeName);
      var divRef = render(template, item);
      $(result).first().appendTo('#divContainer').show('slow', function showNext() {
            $( this ).next().appendTo('#divContainer').show( "slow", showNext );
      });   

}

编辑：实际上有一个关于jQuery的确切场景的例子show() docs这里有例子，我也编辑了上面的代码

$( "#showr" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});

Answer 2

以下工作正常，如fiddle所示。

@gaetanoM推荐这种方法。

 $(document).ready(function() {

        $("#lnkGetServiceCharges").click(function (event) {
            fireDemo(0);
            event.preventDefault();
        });

    });

function fireDemo(index)
{
    if (result[index]) {
      var divRef = render(template, result[index]);
      $(divRef).appendTo('#divContainer').show('slow',  
            function() {
            fireDemo(index + 1 );
          });
    }
}

基于模板的动态div渲染与动画

2 个答案: