fadeOut row and fadeIn as last row

问题:

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.

Currently I have this:

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

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

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

回答1:

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

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

回答2:

How about this:

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

Try it

回答3:

you can also use

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