淡出行和淡入作为最后一行 [英] fadeOut row and fadeIn as last row

问题描述

我正在尝试淡出一行并在表的最后一行淡入淡出，但是我无法让fadeIn正常工作.

I'm trying to fadeOut a row and fadeIn as the last row in the table, but I can't get the fadeIn to work.

目前我有这个:

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(row)似乎也不起作用.

Even if I leave off fadeIn lastRow.after(row) doesn't seem to be working.

推荐答案

.after() 返回lastRow，而不是您希望插入的行，因此请使用 .insertAfter() ，如下所示:

.after() returns lastRow, not the row you inserted after it like you want, so use .insertAfter() like this:

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

还请注意，我们正在淡入我们要淡入的<tr>，而不是单独的<td>元素(如果隐藏了子元素，则将父对象淡入也无济于事).另外，请查看 .closest() 而不是

Also note we're fading the <tr> we're fading back in, not the individual <td> elements (fading the parent back in doesn't help if the children are hidden). Also look at .closest() instead of .parents()...it's much cheaper/more precise.

以上内容旨在显示已更正的版本，您也可以将其精简为:

The above was meant to show the corrected version, you could also slim it down to:

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

这篇关于淡出行和淡入作为最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！