基於模板的動態div渲染動畫

以下代碼使用模板根據記錄數組顯示div。它大部分工作正常。我也添加了一個動畫來顯示行。但是所有的行都在一起執行動畫。基於模板的動態div渲染動畫

我們如何修改它才能在第一次渲染完成後纔開始第二行渲染，而動畫速度較慢。 jQuery或Bootstrap解決方案都可以。

更新：我也嘗試過「鏈接」 approach-，但沒有奏效。 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'); 
    }); 
}

來源

2017-04-03 Lijo

以下看起來工作，如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); 
      }); 
    } 
}

來源

2017-04-03 17:44:29 Lijo

你燒結其中會OT所有的循環中的所有動畫出現在同一時刻開火，因爲環路迭代速度如此之快。你可以嘗試超時或讓他們去了一個又一個，你可以重新設計你的代碼：

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

來源

2017-04-03 17:12:04

設置超時並未改變行爲。你能解釋一下如何重新設計嗎？「你可以重新設計你的代碼，讓它們一個接一個地執行」 - – Lijo

基本上，而不是你自己的循環，只需使用jQuery選擇器來獲得整個數組，然後讓它遍歷每個''show（）'函數 –

我厭倦了你的更新代碼 - 它沒有工作，如這個[demo]所示（https://jsfiddle.net/LijoCheeran/e0wuchwy/1/）。如果我錯過任何東西，你能更新小提琴嗎？ – Lijo

基於模板的動態div渲染動畫

回答

相關問題