无刷新删除数据删除过程中渐变显示当前删除的行-freejs.net代码演示

首页>>表单>>无刷新删除数据删除过程中渐变显示当前删除的行(2013-11-07)

无刷新删除数据删除过程中渐变显示当前删除的行

本站已经有类似的案例，这边推荐一个可以参考的《jquery 漂亮的删除确认和提交无刷新删除》

不过对于学习的话可以看看不同的

JavaScript Code

<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>

PHP Code

<div id="main">
<ol class="update">
<?php
include("conn.php");
$sql="select * from add_delete_record order by id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["content"]);
$msg_id=$row["id"];
?>
<li><?php echo $message; ?> <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a></li>
<?php
}
?>
</ol>
</div>