jQuery: FadeOut nie pracuje z wierszy tabeli

Question

mam poniższej tabeli HTML jest renderowane do moich browser.I m tworzenia tej tabeli z moim pliku ASP.NET związanym kodzie.

<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> 

i moim javascript Mam funkcję usuwania następująco

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); 

}); 

}

Ale kiedy wywołać funkcję deleteItem, ja nie dostaję gasnącym Effect.Its prostu ukrywanie wiersz taki jak display = "none".

Czy ktoś może mi pomóc rozwiązać ten problem?

Answer 1

Występuje problem w jQuery podczas ukrywania trs. To jest obecne obejście, dopóki nie zrobią czegoś podobnego w rdzeniu, jeśli zdecydują.

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

Zasadniczo ukrywa tds w rzędzie zamiast rzeczywistej rzędu. Następnie usuwa wiersz z DOM. Działa we wszystkich przeglądarkach, w które wierzę. W razie potrzeby można by kierować reklamy na IE.

Answer 2

Te dwie rzeczy są różne:

• Ukrywanie wiersz, albo przez hide(),(), Fadeout slideUp(), stosując klasę, wyznaczając wartość CSS lub w drodze animacji; i
• usuwanie elementu z DOM.

Jeśli dobrze przeczytam to, co mówisz, chcesz zrobić jedno i drugie. Jeśli tak, to spróbuj tego:

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(); 
    }); 
    }); 
}; 

Zasadniczo mówi:

• GET RemoveCart.aspx na serwerze z podanych parametrów;
• Gdy funkcja ta powraca, zacznij zanikać wiersz przez jedną sekundę;
• Po zakończeniu tej funkcji fadeOut usuń ją z DOM.

Answer 3

Choć rozwiązanie Jab jest to droga okrągły problemu to nie zawiera błędu. W szczególności twoja funkcja oddzwaniania, aby usunąć element rodzica, zostanie uruchomiona raz na każdy element td w tym wierszu, kiedy naprawdę powinien wystrzelić tylko raz na ostatni. Można to wykazać poprzez wprowadzenie wywołania alertu do wywołania zwrotnego, które będzie widoczne raz dla każdego td w wierszu.

muszę jeszcze znaleźć naprawdę zgrabny sposób wokół tego, ale skończyło się coś na wzór tego:

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) 
     } 
    }); 
} 

niniejszego zaproszenia należy użyć coś takiego:

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

UWAGA: Moja wersja nie usuwa wiersza z domingu, ponieważ chcę go tylko ukryć/pokazać, ale powinna być łatwa do adaptacji.

Answer 4

Jquery mogą być teraz używane tak:

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

Answer 5

Od jquery 1.6 można użyć obietnice do wykonania oddzwanianie po wszystkich td animacje są zakończone.

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