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