Question

I was reading around and saw this example from David Walsh about how to animate record deletion with mootools. I’d hate to add mootools to a project just to use this effect, so does the exact same effect exist in jquery?

Answer 1

Something along these lines should work:

<style>
  .delete { border:solid 1px; cursor:pointer}
</style>

<div class='delete' id='record-0'>1</div>
<div class='delete' id='record-1'>2</div>
<div class='delete' id='record-2'>3</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('.delete').click(function() {
  $.post("/delete_script",
         {"delete":$(this).attr('id').replace('record-', '')},
         function(){$(this).slideToggle()})
  })
</script>

See also: http://api.jquery.com/animate/