JQuery: FadeOut не работает со строками таблицы

Ответ 1

В jQuery возникает проблема при скрытии trs. Это текущее обходное решение, пока они не сделают что-то похожее в ядре, если они решат.

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

В основном это скрывает tds в строке, а не фактическую строку. Затем он удаляет строку из DOM. Я работаю во всех браузерах. Вы могли бы нацеливать IE конкретно, но при необходимости.

Ответ 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, потому что я просто хочу скрыть/показать ее, но ее довольно легко адаптировать.

Ответ 3

Теперь JQuery можно использовать следующим образом:

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

Ответ 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();
    });
  });
};

В основном это говорит:

• GET RemoveCart.aspx на сервере с заданными параметрами;
• Когда эта функция вернется, начните замирание строки в течение одной секунды;
• Когда этот fadeOut завершен, удалите его из DOM.

Ответ 5

В jquery 1.6 вы можете использовать promises для выполнения одного обратного вызова после завершения анимации td.

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