Removing a table row using jquery, fading and changing color slightly.

Question

Hi,

I have a button that when clicked, gets the row in the table that was clicked on.

So I have:

$("#someId").remove();

I want to highlight the row that is being deleted, and fade it out (it is being deleted).

Is there a way to do this with jQuery? I tried: $("#someId").fadeOut("slow").remove() but tat didn't seem to show anything.

Answer 1

The highlight part, I don't know, but the fade out part:

$("someId").fadeOut(1000,function()
{
    $(this).remove();
});

Which does a callback: http://docs.jquery.com/Effects/fadeOut

Answer 2

If you are trying to change the color of the row without any color transition effect you could add a class to the row being deleted before starting the delete process.

  $("#someId").addClass('hilite').fadeOut('slow', function() {
     $('#someId').remove();
  });

where you would have defined hilite as

.hilite{ background-color:orange;}

Answer 3

In order to do highlighting, you'll need to check out color animations. There is an official JQuery color plugin that you can get in order to do color change animations with the animate function. Once you have it, you should be able to accomplish everything in a manner similar to this:

$("#someId").animate( {backgroundColor:'yellow'}, 1000).fadeOut(1000,function() {
    $('#someId').remove();
});