如何使用jquery淡入转发器LinkBut​​ton

时间:2012-12-27 12:48:19

标签: jquery asp.net repeater databound

我对jquery很新,我在W3Schools上做了几个例子,然后搜索了我的问题,但找不到满足我要求的答案......

无论如何,我有一个水平显示链接按钮的转发器。不用说,每次将不同数量的此类链接按钮加载到转发器。

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

    <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 LinkBut​​ton的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>

我需要指导,但我们非常感谢任何帮助。

提前致谢

2 个答案:

答案 0 :(得分:2)

你可以使用带睡眠的javascript循环:

var numberofbuttonsToDisplay = 5;

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

在显示下一个按钮之前等待1秒,同时淡出实际按钮。

答案 1 :(得分:0)

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

现在是解决方案:

$(document).ready(function () {

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

我在这里引用a因为LinkBut​​ton被渲染为<a>元素。

谢谢大家的帮助:)