jQuery: FadeOut non funziona con le righe di tabella

Question

Ho la seguente tabella HTML viene visualizzata nel mio browser. Sto creando questa tabella dal mio file codebehind 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> 

e nel mio javascript ho la funzione di cancellazione come segue

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

}); 

}

Ma quando chiamo la funzione DeleteItem, io non sto ottenendo l'Effect.Its dissolvenza semplicemente nascondiglio la riga come display = "none".

Qualcuno può guidarmi come risolvere questo problema?

Answer 1

C'è un problema in jQuery quando si nasconde trs. Questa è la soluzione attuale finché non fanno qualcosa di simile nel nucleo, se decidono di farlo.

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

Questa nasconde fondamentalmente la tds nella riga, invece della riga attuale. Quindi rimuove la riga dal DOM. Funziona in tutti i browser che credo. Potresti scegliere specificamente IE come target, se necessario.

Answer 2

Queste due cose sono diverse:

• Nascondere la fila, sia per nascondere(), fadeOut(), slideUp(), l'applicazione di una classe, impostando un valore CSS o per mezzo di un'animazione; e
• rimozione dell'elemento dal DOM.

Se leggo correttamente ciò che dici, vuoi fare entrambe le cose. Se è così, provate questo:

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

Fondamentalmente questo sta dicendo:

• GET RemoveCart.aspx sul server con i parametri indicati;
• Quando quella funzione ritorna, inizia a dissolvere la riga per un periodo di un secondo;
• Quando quel fadeOut è completo, cancellarlo dal DOM.

Answer 3

Mentre la soluzione di Jab è un modo per aggirare il problema, contiene un bug. In particolare, la funzione di callback per rimuovere l'elemento genitore sparerà una volta per ogni elemento 'td' in quella riga, quando in realtà dovrebbe sparare solo una volta per l'ultimo. Questo può essere dimostrato mettendo una chiamata di avviso nel callback, che sarà visto una volta per ogni td nella riga.

Devo ancora trovare un modo veramente pulito intorno a questo, ma ho finito con qualcosa sulla falsariga di questo:

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

chiamare questo si può usare qualcosa di simile:

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

NOTA: La mia versione non rimuove la riga dal dom perché voglio solo nasconderla/mostrarla ma dovrebbe essere abbastanza facile da adattare.

Answer 4

Jquery può ora essere utilizzato in questo modo:

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

Answer 5

Come di jquery 1.6 è possibile utilizzare promette di eseguire una singola richiamata dopo che tutti i td le animazioni sono finiti.

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