How to Fade In repeater LinkButton using jquery

StackOverflow https://stackoverflow.com/questions/14054997

题

I am pretty new to jquery, I've went over a few examples on W3Schools and then googled my question but didn't find an answer that meets my requirements...

Anyway, I have a repeater that shows linkbuttons horizontally. Needless to say, each time, different amount of such linkbuttons is loaded to the repeater.

Here's the Repeater I'm using:

    <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>

I want to create the effect of Fade In using Jquery so that each linbutton will be faded in after the previous had faded in as well... but I don't know how to combine the jquery code with the RepeaterItem LinkButton.

Here's the jquery example code I want my application to look like:

<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>

I need guidance but any help'd be much appreciated.

Thanks in advance

有帮助吗？

解决方案 2

After a long weekend, I've came up with an answer.. It seems that the reason my js / jquery didn't respond was due to the fact that the reference to the <script src="../../script/jquery-1.8.3.min.js" type="text/javascript"></script> was damaged.

Now here's the solution:

$(document).ready(function () {

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

I refer to a here because the LinkButton is rendered to an <a> element.

Thank you all for the help :)

其他提示

You could use a javascript loop with sleep:

var numberofbuttonsToDisplay = 5;

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

It would wait 1 second before displaying the next button while fading in the actual button.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top