jquery - example - funcion fadeout

jQuery: FadeOut no funciona con filas de tabla

Question

Tengo la siguiente tabla HTML que se representa en mi navegador. Estoy creando esta tabla desde mi archivo de código 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>

y en mi javascript tengo la función de borrar de la siguiente manera

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

});

}

Pero cuando llamo a la función deleteItem, no obtengo el efecto de desvanecimiento. Simplemente oculta la fila como la pantalla = "ninguno".

¿Alguien me puede guiar cómo solucionar esto?

Answer 1

A partir de jquery 1.6 puede usar promesas para ejecutar una devolución de llamada única después de que todas las animaciones de td hayan finalizado.

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

Answer 2

Estas dos cosas son diferentes:

• Ocultar la fila, ya sea por hide (), fadeOut (), slideUp (), aplicando una clase, configurando un valor CSS o por medio de una animación; y
• eliminando el elemento del DOM.

Si leo lo que dices correctamente, quieres hacer ambas cosas. Si es así, intente esto:

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

Básicamente esto está diciendo:

• GET RemoveCart.aspx en el servidor con los parámetros dados;
• Cuando esa función regresa, comienza a desvanecer la fila durante un período de un segundo;
• Cuando se complete ese fadeOut, elimínelo del DOM.

Answer 3

Hay un problema en jQuery al ocultar trs . Esta es la solución actual hasta que hagan algo similar en el núcleo, si así lo deciden.

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

Básicamente, esto oculta los tds en la fila, en lugar de la fila real. Luego elimina la fila del DOM. Funciona en todos los navegadores que creo. Usted podría apuntar a IE específicamente si es necesario.

Answer 4

Jquery ahora se puede utilizar de esta manera:

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

Answer 5

Si bien la solución de Jab es la forma de solucionar el problema, contiene un error. Específicamente, su función de devolución de llamada para eliminar el elemento padre se activará una vez por cada elemento ''td'' en esa fila, cuando en realidad solo debería activarse una vez para el último. Esto se puede demostrar poniendo una llamada de alerta en la devolución de llamada, que se verá una vez por cada td en la fila.

Todavía tengo que encontrar una manera realmente clara de solucionar esto, pero terminé con algo parecido a esto:

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

Para llamar a esto usarías algo como esto:

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

NOTA: Mi versión no elimina la fila del dom porque solo quiero ocultarla / mostrarla pero debería ser bastante fácil de adaptar.