fadeOut row и fadeIn как последний ряд

Question

Я пытаюсь fadeOut строки и fadeIn как последняя строка в таблице, но я не могу заставить работать fadeIn.

В настоящее время у меня есть это:

function Test(control) {
            var row = $(control).parents('tr');

            row.find("td").fadeOut('slow', function () {
                var lastRow = $("#table1 tr:last");
                lastRow.after(row).fadeIn('slow');
            });
        }

Даже если я выключу fadeIn, lastRow.after (строка), похоже, не работает.

Answer 1

.after() возвращает lastRow, а не строку, вставленную после нее, как вы хотите, поэтому используйте .insertAfter() как это:

function Test(control) {
  var row = $(control).closest('tr');
  row.fadeOut('slow', function () {
    row.insertAfter("#table1 tr:last").fadeIn('slow');
  });
}

Также обратите внимание, что мы постепенно исчезаем <tr>, в который мы возвращаемся, а не отдельные элементы <td> (возвращение родительского элемента не помогает, если дочерние элементы скрыты).Также посмотрите на .closest() вместо .parents() ... это намного дешевле / точнее.

---

Выше было предназначено показать исправленныеверсия, вы также можете уменьшить его до:

function Test(control) {
  $(control).closest('tr').fadeOut('slow', function () {
    $(this).insertAfter("#table1 tr:last").fadeIn('slow');
  });
}

Answer 2

Вы также можете использовать

$(this).fadeIn('slow').insertAfter("#table1 tr:last")

Answer 3

Как насчет этого:

    $('tr').fadeOut(500, function(){
        $(this).appendTo('table').fadeIn(500);
    });

Попробуйте