jquery - jQuery :FadeOut 不适用于表格行

Question

我有以下 HTML 表呈现到我的浏览器。我正在从我的 ASP.NET 代码隐藏文件创建此表。

<table Class="tblTradeInCart">
    <tr class="tblCartHeader">
        <td>Item</td>
        <td>Model</td>
        <td> Price</td>
        <td>Delete</td>
    </tr>
    <tr id="tr_15_1">
        <td><img src="dia/images/LGVX9700.jpg" width="50" height="50" /></td>
        <td>LG VX9700</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(15,1,'tr_15_1')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_11_8">
        <td><img src="dia/images/NOK5610.jpg" width="50" height="50" /></td>
        <td>NOKIA 5610</td>
        <td>$ 122</td>
        <td><a href='#' onclick="deleteItem(11,8,'tr_11_8')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
    <tr id="tr_14_9">
        <td><img src="dia/images/NOKN95.jpg" width="50" height="50" /></td>
        <td>NOKIA N95</td>
        <td>$ 91.5</td>
        <td><a href='#' onclick="deleteItem(14,9,'tr_14_9')"><img src='..\Lib\images\NCcross.gif' style='border:0px'></a></td>
    </tr>
</table>

在我的javascript中，我有如下的删除功能

function deleteItem(modelId,itemindexId, rowId)
{
   $.get("RemoveFromCart.aspx",{ model:modelId,cartItem:itemindexId,mode:"removefromcart",rand:Math.random() } ,function(data)
 { 
    //document.getElementById(rowId).style.display = "none";

    var row=$("#"+rowId);     
   row.fadeOut(1000);

});

}

但是当我调用 deleteItem 函数时，我没有得到淡入淡出的效果。它只是像 display="none" 一样隐藏行。

谁能指导我如何解决这个问题？

Answer 1

jQuery 隐藏时有问题trs。这是当前的解决方法，直到他们决定在核心中执行类似的操作。

row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});

这基本上隐藏了tds行中的，而不是实际的行。然后它从 DOM 中删除该行。它适用于我相信的所有浏览器。如果需要，您可以专门针对 IE。

Answer 2

虽然 Jab 的解决方案是解决问题的方法，但它确实包含错误。具体来说，您删除父元素的回调函数将为该行中的每个“td”元素触发一次，而实际上它应该只为最后一个触发一次。这可以通过将警报调用放入回调中来证明，对于行中的每个 td 都会看到一次。

我还没有找到一个非常巧妙的方法来解决这个问题，但我最终得到了一些类似的东西：

function ShowHideTableRow(rowSelector, show, callback)
{
    var childCellsSelector = $(rowSelector).children("td");
    var ubound = childCellsSelector.length - 1;
    var lastCallback = null;

    childCellsSelector.each(function(i)
    {
        // Only execute the callback on the last element.
        if (ubound == i)
            lastCallback = callback

        if (show)
        {
            $(this).fadeIn("slow", lastCallback)
        }
        else
        {
            $(this).fadeOut("slow", lastCallback)
        }
    });
}

要调用它，您将使用如下内容：

ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });

注意：我的版本不会从 dom 中删除该行，因为我只想隐藏/显示它，但它应该很容易适应。

Answer 3

现在可以像这样使用 Jquery：

$("#id_of_your_tr").fadeOut(1000);

Answer 4

这两件事是不同的：

• 通过 hide()、fadeOut()、slideUp()、应用类、设置 CSS 值或通过动画方式隐藏行；和
• 从 DOM 中删除元素。

如果我正确地阅读了您所说的内容，那么您想两者都做。如果是这样，试试这个：

function deleteItem(modelId,itemindexId, rowId) {
  $.get("RemoveFromCart.aspx", {
    model: modelId,
    cartItem: itemindexId,
    mode: "removefromcart",
    rand:Math.random()
  }, function(data) { 
    var row=$("#"+rowId);     
    row.fadeOut(1000, function() {
      row.remove();
    });
  });
};

基本上这是在说：

• 使用给定参数在服务器上获取 RemoveCart.aspx；
• 当该函数返回时，开始在一秒钟内淡出该行；
• 当淡出完成后，将其从 DOM 中删除。

Answer 5

从jquery 1.6td开始，您可以使用 Promise 在所有动画完成后执行单个回调。

$('td', row).each(function() {
    $(this).fadeOut('slow', 'linear');
})
.promise()
.done(function() {
    $(this).parent('tr').remove();
});