将 fadeIn() 添加到按钮单击中
Adding fadeIn() to button click
我有以下 + - 切换show/hide
表,fadeOut()
在隐藏上工作,我想添加fadeIn()
但不确定放在哪里,我尝试在"壁橱"行的不同点添加第一个块但没有成功。
<script type="text/javascript">
$('#plusMinus').live("click", function () {
if ($(this).html() == "+") {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).html("-");
}
else {
$(this).html("+");
$(this).closest("tr").next().fadeOut();
}
});
<table class="Grid rwd-table">
<tr>
<th scope="col"> </th>
<th scope="col">Basket Created Date</th>
<th scope="col">Customer Reference</th>
<th scope="col">Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
<asp:Repeater ID="rptBoms" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<tr>
<td>
<a id="plusMinus" href="#" style="cursor: pointer; text-decoration: none; font-size: 25px">+</a>
<asp:Panel ID="pnlBomItems" runat="server" Style="display: none">
<table id="table1" class="ChildGrid">
<tr>
<img style='border: none' onmouseout="this.src='/SiteFiles/Images/buttons/pdf_out.jpg'" onmouseover="this.src='/SiteFiles/Images/buttons/pdf_over.jpg' " src='/SiteFiles/Images/buttons/pdf_out.jpg' />
<th scope="col" class="header">
<asp:LinkButton ID="lnkBtnPdf" runat="server"></asp:LinkButton></th>
<th scope="col">Product Code</th>
<th scope="col">Customer Product Code</th>
<th scope="col">Quantity</th>
<th scope="col">Select for Add</th>
<th>
<input type="checkbox" id="CheckAll" checked=""></th>
</tr>
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<tr>
<td class="content">
<td class="content"><%#Eval("ItemProductCode")%></td>
<td class="content"></td>
<td class="content"><%#Eval("ItemQuantity")%></td>
<td class="content">
<td>
<input type="checkbox" id="chkItems" value='<%# Eval("BasketCreation") + "&" + Eval("ItemID")%>' checked="" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</asp:Panel>
<asp:HiddenField ID="hfBasketCreation" runat="server" Value='<%#Eval("BasketCreation")%>' />
<asp:HiddenField ID="hfUserID" runat="server" Value='<%#Eval("UserID")%>' />
</td>
<td class="content"><%#Eval("BasketCreation")%><br />
<%#Eval("UserID")%></td>
<td>
<asp:TextBox runat="server" ID="txtBomName" name='<%# Eval("BasketCreation") + "," + Eval("UserID")%>' Width="225px" OnTextChanged="txtbomName_TextChanged" Text='<%#Eval("BomName")%>'></asp:TextBox>
<td>
<asp:TextBox ID="txtQty" runat="server" Width="50px" OnTextChanged="txtQty_TextChanged" Text="1"></asp:TextBox>
<td>
<asp:LinkButton ID="lnkUpd_OnClick" runat="server" OnClick="lnkUpd_OnClick" CssClass="content" CommandName="Update" CommandArgument='<%# Eval("BasketCreation") + "," + Eval("UserID") + "," + Eval("BomName")%>'>
<img src="/SiteFiles/Images/buttons/btn_update_out.jpg" onmouseover="this.src='/SiteFiles/Images/buttons/btn_update_over.jpg'" onmouseout="this.src='/SiteFiles/Images/buttons/btn_update_out.jpg'" alt="Update Customer Reference" style="cursor:pointer;" />
</asp:LinkButton></td>
<td>
<asp:LinkButton ID="lkbAdd" runat="server" Title="Add Bom To Basket" CssClass="fa fa-shopping-cart" OnClick="lnkadd2Cart_OnClick" CommandArgument='<%# Eval("BasketCreation") + "," + Eval("UserID") + "," + Eval("BomName")%>' CommandName="Add" Style="font-size: 25px;" /></td>
<td>
<asp:LinkButton ID="lkbDelete" runat="server" Title="Delete Bom" CommandName="Delete" CssClass="fa fa-trash-o" OnClick="lnkdel_OnClick" CommandArgument='<%# Eval("BasketCreation") + "," + Eval("UserID")%>' Style="font-size: 25px; color: gray; float: right;" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
你可以分离这个指令并使用insertAfter()函数:
var new_line = $("<tr><td></td><td colspan='999'>" + $(this).next().html() + "</td></tr>");
var current_line = $(this).closest("tr");
new_line.insertAfter(current_line);
new_line.hide().fadeIn(1000);
希望这有帮助。
$('#plusMinus').on("click", function () {
if ($(this).html() == "+") {
var new_line = $("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
var current_line = $(this).closest("tr");
new_line.insertAfter(current_line);
new_line.hide().fadeIn(1000);
$(this).html("-");
}else {
$(this).html("+");
$(this).closest("tr").next().fadeOut();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button id='plusMinus'>+</button>
</td>
</tr>
</table>
以下是一些演示 fadein jquery 的示例在此处输入链接说明在此处输入链接说明
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件