Question

我在主div标签内有一组div标签，我根据条件按顺序显示。我必须在一段时间后逐行显示内部div标签。我该怎么做？

<div id="comments" class = "u4073_container">
@if (@Messages != null)
{
for (int i = 0; i < Messages.Count; i++)
{
    if (Messages[i].MessageType == 0)
    {
            <div id="lblBlack" style="color:black;font-size: 13px;font-style: normal; font-family: Arial;">@Messages[i].Message </div>
            <div style="height: 5px;"></div>                

    }
    else if (Messages[i].MessageType == 1)
    {
            <div id="lblGreen" style="color:green;font-size: 13px;font-style: normal; font-family: Arial;">@Messages[i].Message </div>
            <div style="height: 5px;"></div>
    }
    else if (Messages[i].MessageType == 2)
    {
            <div id="lblRed" style="color:red;font-size: 13px;font-style: normal; font-family: Arial;">@Messages[i].Message </div>
            <div style="height: 5px;"></div>
    }
    else if (Messages[i].MessageType == 3)
    {
            <div id="lblBlue" style="color:blue;font-size: 13px;font-style: normal; font-family: Arial;">@Messages[i].Message </div>
            <div style="height: 5px;"></div>
    }

}
}
</div>

提前感谢您的帮助!!!

Answer 1

您可能想要做的是在已经生成所有内容的情况下在客户端进行处理，对吧？首先，您应该设置以下样式：

#comments > div { display: none; }

然后，您的脚本可能看起来与此类似：

$(function() {
    var to = 0;
    $("#comments > div").each(function(i, e) {
        to += 500;
        setTimeout(function() { $(e).fadeIn(); }, to);
    });
});

这应该可行，但你的“spacer”div也会计算在内。摆脱它们，只需将margin-bottom: 5px添加到lbl* div。

这是demo。当然，您可以通过调整500（ms）数来控制超时。

显示具有时间延迟的动态标签

1 个答案: