基于模板的动态div动画渲染
基于模板的动态div动画渲染
提问于 2017-04-03 17:06:50
下面的代码使用模板来显示基于记录数组的div。在大多数情况下，它工作得很好。我还添加了一个动画来显示行。但是所有的行都在一起执行动画。
我们如何修改它，以启动第二行呈现后，第一个完成与较慢的动画。无论是jQuery还是引导解决方案都是可以的。
UPDATE：我也尝试过“链接”方法--但这行不通。小提琴2
<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
</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');
});
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-03 17:44:29
如下所示，如下所示，该小提琴工作正常。
@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 );
});
}
}Stack Overflow用户
发布于 2017-04-03 17:12:04
您正在触发循环中的所有动画，这些动画看起来都是在同一时刻触发的，因为循环的迭代速度太快了。您可以尝试超时，也可以重新设计代码，以便它们一个接一个地运行：
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() 文档上有一个关于您的确切场景的示例，这里是示例，我还编辑了上面的代码。
$( "#showr" ).click(function() {
$( "div" ).first().show( "fast", function showNext() {
$( this ).next( "div" ).show( "fast", showNext );
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43190439
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号