javascript - 将 fadeIn() 添加到按钮单击

Question

我有以下 + - show/hide 表的切换，fadeOut() 用于隐藏，我想添加 fadeIn() 但不确定将它放在哪里，我尝试在第一个 block 的“壁橱”行的不同点添加但没有成功。

<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">&nbsp</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>

Answer 1

您可以将此指令分开并使用 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>