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
