Delete Records with Color Change Effect using jQuery and Ajax

This post is an update of my previous post Delete Records animation effect with jquery. I had added new feature records delete with color change animation effect using jquery beforeSend method and color plugin. It is very useful to display loading status messages or effects before getting the ajax success request.

Database Table Code
A simple database table two columns msg_id and message.

CREATE TABLE updates(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);

jQuery code
Contains javascipt code. $(".delete_button").click(function(){}- delete_button is the class name of anchor tag (X). Using element.attr("id") calling delete button value.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});

}

});

return false;
});
});
</script>

deleteajax.php
Contains PHP code. Delete record from the database.

<?php
include("dbconfig.php");
if($_POST['id'])

{

$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>

CSS Code
You should use background-color here otherwise jquery.color.js could not work.

*{margin:0;padding:0;}

ol.update

{
list-style:none;font-size:1.2em;
}

ol.update li

{
height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}

#main

{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}

.delete_button

{
margin-left:10px;
font-weight:bold;
float:right;
}