如何使用 jquery 淡入中继器 LinkButton答案

【问题标题】：How to Fade In repeater LinkButton using jquery如何使用 jquery 淡入中继器 LinkButton
【发布时间】：2012-12-12 20:41:33
【问题描述】：

我对 jquery 还是很陌生，我在 W3Schools 上查看了一些示例，然后用 Google 搜索了我的问题，但没有找到符合我要求的答案...

无论如何，我有一个水平显示链接按钮的中继器。不用说，每次都会向中继器加载不同数量的此类链接按钮。

这是我正在使用的中继器：

    <div style="position: relative">
    <asp:Repeater runat="server" ID="repStatuses" 
            onitemdatabound="repStatuses_ItemDataBound" 
            onitemcommand="repStatuses_ItemCommand">
      <ItemTemplate>
        <asp:LinkButton ID="linkBtnStatuses" runat="server" CommandName="ShowText" CommandArgument='<%# Eval("Priority") + ";" + Eval("LevelID") + ";" + Eval("ID") %>'>
          <div runat="server" id="divSts" class="fontAriel"></div>
        </asp:LinkButton>
      </ItemTemplate>
    </asp:Repeater>
    </div>

我想使用 Jquery 创建 Fade In 的效果，以便每个 linbutton 在前一个淡入之后也会淡入...但我不知道如何组合带有RepeaterItem LinkButton 的jquery 代码。

这是我希望我的应用程序看起来像这样的 jquery 示例代码：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#d1").fadeIn(2000);
    $("#d2").fadeIn(3000);
    $("#d3").fadeIn(6000);
  });
});
</script>
</head>

<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>

<br><br>
<div id="d1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="d2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="d3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

我需要指导，但我们将不胜感激。

提前致谢

【问题讨论】：

标签： jquery asp.net repeater databound

【解决方案1】：

您可以使用带有睡眠的 javascript 循环：

var numberofbuttonsToDisplay = 5;

for (i=1;i<=numberofbuttonsToDisplay;i++)
{
  $('#d'+i).fadeIn(1000);
  sleep(1000);
}

它会等待 1 秒，然后才会显示下一个按钮，同时淡入实际按钮。

【讨论】：

您的回答是一个很好的解决方案，但我认为您并没有安静地得到我，我没有那些 div，而是我所拥有的只是 <asp:LinkButton> 中的 Repeater。我希望单独（或以某种方式）接近该链接按钮，以便每个按钮在前一个按钮之后淡入。

【解决方案2】：

经过一个漫长的周末，我想出了一个答案..似乎我的 js / jquery 没有响应的原因是由于对<script src="../../script/jquery-1.8.3.min.js" type="text/javascript"></script> 的引用被损坏了。

现在是解决方案：

$(document).ready(function () {

    $('a[id*="repStatuses"]').each(function () {
        $(this).show(2500);
        $(this).delay(1000);
    });
});

我在这里指的是a，因为LinkButton 被渲染为<a> 元素。

谢谢大家的帮助:)

【讨论】：