The code is working great except when you delete a record the animation is a bit choppy. I've only tested it in IE7.

I got this tutorial from David Walsh's website...

any suggestions??

live demo: http://www.rimdev.sgspoint.com/quality/index.php

PHP Page:

 

  
 if(isset($_GET['delete']))
{
 $sql2 = 'DELETE FROM table WHERE id = '.(int)$_GET['delete'];
 $result2 = mysql_query($sql2);
}




  

  
$sql = "SELECT * FROM table";
$result = mysql_query($sql);

  
while($row= mysql_fetch_array($result)) { 
  
echo '<DIV class=record id="record-',$row['id'],'">
  

',$row['id'],'

  

<A class=delete href="?delete=',$row['id'],'" name="delete">Delete</A>
</DIV>';


  

}

 

JQuery Code:

 

  
 $(document).ready(function() {
 $('a.delete').click(function(e) {
  e.preventDefault();
  var parent = $(this).parent();
  $.ajax({
   type: 'get',
   url: 'index.php',
   data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
   beforeSend: function() {
    parent.animate({'backgroundColor':'#fb6c6c'},200);
   },
   success: function() {
    parent.slideUp(200,function() {
     parent.remove();
    });
   }
  });
 });
});


















 

CSS:

 

  
 .record { padding:10px 20px; background:#eee; border-top:1px solid #ccc; width:500px; font-size:13px}
.delete   { color:#f00; display:block; width:40px; float:right; }