I am building a custom jQuery plugin which allows the user to delete records within a table in real-time, among many other things. When the records are deleted, I would like the the background-color of the deleted table row to turn red, then slide up out of view.

Here is a snippet of my code below, which doesn't do any of the color changing animation, nor does it slide up the row. However, it does delete the row when what is supposed to be the slide up animation, finishes. Some things to know when reviewing the code below:

1. The object variable is a jQuery reference to the object which was clicked and triggered the delete operation.


2. The object.parent().parent() object is the row which is being deleted.


3. The deleteHighlight CSS class contains the color which will turn the row a red color.


4. The addClass method uses jQueryUI's addClass method, not jQuery's. It allows an animated effect and a callback.

object.parent().parent().addClass('deleteHighlight', 1000, function() {

//Fold the table row

  $(this).slideUp(1000, function() {

  //Delete the old row

    $(this).remove();

  });

});

Here is the HTML on which this is being executed, nothing special:

<table class=dataTable>

<thead>

<tr>

<th>&nbsp;</th>

<th>Title</th>

<th>Content Snapshot</th>

<th>Management</th>

</tr>

</thead>



<tbody>

<tr class=odd id=11 name=1>

<td class=center width50><a class=dragger></a><a class=visibilityTrigger eyeShow></a></td>

<td class=center width150>Title</td>

<td>

<div class=clipContainer>Content</div>

<div class=hide contentContainer>Content</div>

<div class=hide URLContainer>my-url</div>

</td>

<td class=center width75><a class=edit></a><a class=delete></a></td>

</tr>

</tbody>

</table>

Could someone please provide an example of how I can fix this?

Thank you for your time.