我对jQuery来说是很新的,我已经在W3Schools上介绍了一些示例,然后搜索了我的问题,但没有找到满足我要求的答案...
无论如何,我有一个中继器,可以水平显示linkButtons。不用说,每次将不同数量的链接装载到中继器上。
这是我正在使用的中继器:
<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中创建淡出的效果,以便在上一位linbutton逐渐消失后,每个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>
我需要指导,但要感谢任何帮助。
预先感谢
您可以使用带有睡眠的JavaScript循环:
var numberofbuttonsToDisplay = 5;
for (i=1;i<=numberofbuttonsToDisplay;i++)
{
$('#d'+i).fadeIn(1000);
sleep(1000);
}
它将等待1秒钟,然后在实际按钮中褪色时显示下一个按钮。
在一个漫长的周末之后,我想到了一个答案。.看来我的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
,因为链接呈现到<a>
元素。
谢谢大家的帮助:)