アニメーションしながらリストの順番を入れ替える

Result

jQuery

$(document).ready(function() {
    $('li').click(function() {
      var c = $(this);
      var All = c.prevAll();

      if(All.length > 0) {
        var top = $(All[All.length - 1]);
        var p = $(All[0]);
        var Up = c.prop('offsetTop') - top.prop('offsetTop');
        var Down = (c.offset().top + c.outerHeight()) - (p.offset().top + p.outerHeight());

        c.css('position', 'relative');
        All.css('position', 'relative');
        c.animate({'top': -Up});
        All.animate({'top': Down}, {complete: function() {
          c.parent().prepend(c);
          c.css({'position': 'static', 'top': 0});
          All.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });​

html

• list 01
• list 02
• list 03
• list 04
• list 05

​

via

https://forrst.com/posts/Animated_list_item_reordering_in_jQuery-RR1

forrst.com