CODEWITHSUNDEEP
jquery
dirk
dirk

Reputation: 2306

Jquery insertBefore/insertAfter animation not working

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?

Upvotes: 5

Views: 5330

Answers (3)

Rodrigo Serzedello
Rodrigo Serzedello

Reputation: 327

Just add the a sequence of hide and show:

jQuery(html_usr).insertBefore( "#log_row" ).hide().show('blind');

Upvotes: 0

Trent Earl
Trent Earl

Reputation: 3607

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.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191779

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.

Upvotes: 5

Related Questions