jQuery：FadeOut不使用表行
我有以下HTML表格呈现给我的浏览器。我正在从我的ASP.NET代码隐藏文件创建此表。
Item Model Price Delete 
LG VX9700 $ 122 
NOKIA 5610 $ 122 
NOKIA N95 $ 91.5
在我的JavaScript中我有删除function如下
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”。
任何人都可以指导我如何解决这个问题吗？
隐藏trs时jQuery中存在问题。 这是当前的解决方法，直到他们在核心中做类似的事情，如果他们决定。
row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});
这基本上隐藏了行中的tds ，而不是实际的行。 然后它从DOM中删除该行。 它适用于我认为的所有浏览器。 如果需要，您可以专门针对IE。
虽然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中删除行，因为我只想隐藏/显示它，但它应该很容易适应。
现在可以像这样使用Jquery：
$("#id_of_your_tr").fadeOut(1000);
这两件事情是不同的：
- 通过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;
- 当该函数返回时，开始在一秒钟内淡出该行;
- 当fadeOut完成后，将其从DOM中删除。
从jquery 1.6开始，你可以使用promises在所有td动画完成后执行单个回调。
$('td', row).each(function() { $(this).fadeOut('slow', 'linear'); }) .promise() .done(function() { $(this).parent('tr').remove(); });