0
我有这样的ASP和HTML代码:如何使幻灯片动画JQuery的时候显示隐藏元素
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<div class="row1">
<table style="cursor: pointer; width: 100%">
<tr>
<td rowspan="4">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
Height="32" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="7">
<input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" />
</td>
</tr>
<tr>
<td>text:</td>
<td rowspan="4">
<h1 style="color: gray"><%# Eval("Text") %></h1>
</td>
</tr>
<tr class="hidden">
<td>text:</td>
<td><%# Eval("Text") %></td>
</tr>
<tr class="hidden">
<td>X:</td>
<td><%# Eval("Lon") %></td>
</tr>
<tr class="hidden">
<td>Y:</td>
<td><%# Eval("Lat") %></td>
</tr>
<tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Javascript代码:
$('.toggleRow').on('click', function() {
$(this).closest('table').find('tr.pointDescArea').hide(300);
$(this).closest('table').find('tr.hidden').show(1000);
return false;
});
当与类toggleRow板条点击jQuery函数以上解雇并显示定义为隐藏的行,并隐藏包含类pointDescArea的行。
我的问题是我怎样才能改变上面的jquery行使用左侧的动画幻灯片(即消失(隐藏),元素将向左滑动,而出现(显示),它会从右移动到剩下)。
任何想法如何实现它?
你能共享产生的HTML的,而不是服务器端模板 –
http://stackoverflow.com/questions/467336/how-to-use-slidedown-或者出现功能上,一个表行 –