Animated Ajax Record Deletion Using jQuery (Jquery ajax 删除记录)
<style type="text/css">
.record { padding:10px 20px; background:#eee; border-top:1px solid #ccc; width:300px; }</style>
.delete { color:#f00; display:block; width:40px; float:right; }
<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function() {</script>
$('a.delete').click(function(e) {
e.preventDefault();
var parent = $(this).parent();
$.ajax({
type: 'get',
url: 'jquery-record-delete.php',
data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function() {
parent.slideUp(300,function() {
parent.remove();
});
}
});
});
});
<div class="record" id="record-1">
<a href="?delete=1" class="delete">Delete</a>
<strong>Database Item 1</strong>
</div>
<div class="record" id="record-2">
<a href="?delete=2" class="delete">Delete</a>
<strong>Database Item 2</strong>
</div>
Demo: http://davidwalsh.name/dw-content/jquery-record-delete.php
another: http://davidwalsh.name/animated-ajax-record-deletion-mootools