$(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}); }}); } }); });
<ul> <li>list 01</li> <li>list 02</li> <li>list 03</li> <li>list 04</li> <li>list 05</li> </ul>