I have a UL-LI e.g.

<ul>
    <li id="1">item-1</li>
    <li id="2">item-2</li>
    <li id="3">item-3</li>
    <li id="4">item-4</li>
</ul>

I would like to move one of the items to another position in the list. e.g. item-2 to AFTER item-4.

Normally I can do this by deleting the item and then appending it after another.

But I would like to do this to happen visually with animation. As in, item-2 descends to after item-4.

How can I achieve this?

I have a UL-LI e.g.

<ul>
    <li id="1">item-1</li>
    <li id="2">item-2</li>
    <li id="3">item-3</li>
    <li id="4">item-4</li>
</ul>

I would like to move one of the items to another position in the list. e.g. item-2 to AFTER item-4.

Normally I can do this by deleting the item and then appending it after another.

But I would like to do this to happen visually with animation. As in, item-2 descends to after item-4.

How can I achieve this?

• javascript
• jquery

• Try my demo jsfiddle/skram/QKS8c/2 and Let me know if that is something you we looking for. – Selvakumar Arumugam Commented Mar 2, 2012 at 20:42

2 Answers 2

IDs should not start with numbers...

$('#two').slideUp(500, function () {
    $('#four').after(this);
    $(this).slideDown(500);
});

Here is a demo: http://jsfiddle/jasper/8JFBA/

Or if you always want to add the element to the end:

$('#two').slideUp(500, function () {
    $('ul').append(this);
    $(this).slideDown(500);
});

Here is a demo: http://jsfiddle/jasper/8JFBA/1/

Update

Ok, so if you want the element to slide to it's new location here ya go:

//absolutely position the element and give it a top property so it doesn't go to the top of the container
$('#two').css({ position : 'absolute', top : $('#two').position().top });

//now get the offset to the bottom of the list by getting the top offset and height for the last list-item
var lastOffset = ($(this).children().last().position().top + $(this).children().last().height());

//now animate the element to the new position
$('#two').animate({ top : lastOffset }, 1000, function () {

    //when the animation is done, re-add the element to the new position in the list and reset it's position and top values
    $(this).appendTo('ul').css({ position : 'relative', top : 0 });
});

And a demo: http://jsfiddle/jasper/8JFBA/3/

Update

You can animate not only the element being moved to the end of the list but you can animate the rest of the list items as they move up:

var $LIs     = $('ul').children(),
    liHeight = 20;
$LIs.on('click', function () {
    
    var index      = ($(this).index()),
        $LIsAfter  = $LIs.filter(':gt(' + index + ')');
    
    console.log(index);
    
    $(this).css({ position : 'absolute', top : $(this).position().top });
    
    $.each($LIsAfter, function (i) {
        $(this).css({ position : 'absolute', top : ((i + index + 1) * liHeight) });
    });
    
    $(this).stop(true, true).animate({ top : (($LIs.length - 1) * liHeight)}, 1000, function () {
        $(this).appendTo('ul').css({ position : 'relative', top : 0 });
    });
    
    $.each($LIsAfter, function (i) {
        $(this).stop(true, true).animate({ top : ((index + i) * liHeight) }, 1000, function () {
            $(this).css({ position : 'relative', top : 0 });
        });
    });
});

Here is a demo: http://jsfiddle/jasper/8JFBA/8/

This isn't quite plete, there is still a bug or two, but it should help get anyone started on the idea.

I tried to implement a smoother transition when you descend and below is my version..

You need to try out the demo to understand how it works.. Select value from the drop down and hit Descend to see the animation.

DEMO

Edit: Updated top position of $from before addClass('active') to start from the exact position and not top: 0px. Thanks to Jasper for finding this issue.

var $from = $('#from');
var $to = $('#to');

$('button').click (function () {
   var from = $from.val();
   var to = $to.val();

   var $li = $('ul li');
   var $fromEl = $('#' + from);
   var $toEl =  $('#' + to);

    //only descending    
   if (from == to || $li.index($fromEl) > $li.index($toEl)) return;

   var destX = $toEl.position().top;

   $toEl.after('<li id="tmpLi2"></li>');

   $('#tmpLi2').animate({height: $fromEl.outerHeight()}, 1000);

     //add a blank li for smooth animation
     $fromEl
         .after('<li id="tmpLi1">&nbsp;</li>')
         .css ('top', $fromEl.position().top)
         .addClass ('active' )
         .animate({
                top: (destX)
             },
             1000,
             function() {
                $toEl.after(this);
                $('#tmpLi2').remove();
                $(this).removeClass('active');
          });

    $('#tmpLi1').slideUp(function() { $(this).remove()});

});