[jQuery] Assigning an animation toggle to a checkbox to fade a table row in/out

[quirksmode]

I have created a table, at the end of each table row is a checkbox.
When the user selects the checkbox, that row will fade out to give the
illusion its now disabled. When the checkbox is unchecked I want the
row to fade back.

Can this be done? I have managed to do it rather crudely in the
following example:

Javascript...................................

<script>
 $(document).ready(function(){
    $(".deleteRow").click(function(){
      $("tr").animate({
        opacity: 0.2,
      }, 1000 );
    });
  });
 </script>


Html...................................

<table>
<tr>
<th>Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
<tr>
<td>test row 1</td>
<td><input name="input1" type="text" /></td>
<td><select name="select1" ><option value ="first">first</option></
select></td>
<td class="right"><input id="go" name="deleteRow" type="checkbox"
class="deleteRow" value="deleteRow" /></td>
</tr>
</table>

Css...................................

<style type="text/css">

table{
width:500px;
border-collapse:collapse;
}

tr th{
font-weight:bold;
text-align:left;
}

tr td.right{
text-align:right;
}

tr{
border-bottom:1px solid #ccc;
}

</style>