Jquery insertBefore/insertAfter animation not working

Question

I made a simple script that allows users to sort divs using up and down buttons.

jsFiddle: http://jsfiddle.net/dZ6rC/5/

Unfortunately, my attempt to animate the move on mouse click does not cause the tags to be moved.

This is my code:

$('.up').click(function(){
  var previous = $(this).parent().parent().prev('.item');
  $(this).parent().parent().insertBefore(previous).slideUp();
});
$('.down').click(function(){
  var next = $(this).parent().parent().next('.item');
  $(this).parent().parent().insertAfter(next).slideDown();
});​

Can someone figure out why the tags don't move?

Answer 1

You're not hiding the elements before sliding them down so the effect is not seen:

http://jsfiddle.net/dZ6rC/4/

You can just add .hide before .slideDown. I think you probably want to improve the animation a bit from there, but just keep this in mind.

Answer 2

I am not completely sure what you are trying to accomplish but chaining 3 parent() calls is probably not the best way.

I am guessing this solves your problem:

$('.up').click(function(){
  $(this).parents('.item').slideUp();
});
$('.down').click(function(){
 $(this).parents('.item').slideDown();
});​

If I am missing a requirement please update your question.