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; }
      .delete                  { color:#f00; display:block; width:40px; float:right; }

</style>

<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() {
      $('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();
                        });
                  }
            });
      });
});

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