?
<!doctype html> <html><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>JQuery實現的模塊交換動畫效果</title><meta name="Keywords" content="jquery，模塊，交換，動畫，javascript特效"/><meta name="Description" content="JQuery實現的模塊交換動畫效果。在模塊交換過程中，設置模塊position為absolute，實現交換。"/><script type="text/javascript" src="jquery-1.8.1.min.js""></script><style type="text/css">div.container{position:relative;}div.container .itemA,div.container .itemE{width:300px;height:100px;background:#aaa;}div.container .itemE{background:#eee;}div.container .itemA .btn,div.container .itemE .btn{text-align:right;}</style><script type="text/javascript">function addItem() {var p = $('.container'), lastChild = p.children(":last");p.append(lastChild.clone().attr('class', lastChild.attr('class') == 'itemE' ? 'itemA' : 'itemE'));p.children(':last').append("--" + new Date().toLocaleTimeString());}function setItemPosition(dvContainer, isAB) {//更新子項的position和top dvContainer.css('height', isAB ? dvContainer.height() : '');var h = 0, eachItem;dvContainer.children().each(function () {eachItem = $(this);eachItem.css({ 'position': isAB ? 'absolute' : 'relative', 'top': isAB ? h : '' });if (isAB) h += eachItem.outerHeight(true);});}$(function () {$('#btnAdd').click(addItem);$('.btn input').live('click', function () {var o = $(this), pNode = o.parent().parent(), v = o.val();switch (v) {case '刪除': if (pNode.parent().children().length < 2) alert('至少留有一項！'); else pNode.remove(); break;case '上':case '下':var refNode = pNode[v == '上' ? 'prev' : 'next']();if (refNode[0] == null) { alert(v == '上' ? '已經是第一位！' : '已經是最后一位！'); return false; }setItemPosition(pNode.parent(), true);var nItemTop = refNode.css('top'), refItemTop = pNode.css('top');pNode[v == '上' ? 'after' : 'before'](refNode); //交換位置 pNode.animate({ top: nItemTop }, 300); ;refNode.animate({ top: refItemTop }, 300, function () { setItemPosition(pNode.parent()); });break;}});});</script></head><body><input type="button" value="添加新快" id="btnAdd"/><div class="container"><div class="itemA"><div class="btn"><input type="button" value="刪除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他內容</div><div class="itemE"><div class="btn"><input type="button" value="刪除" /><input type="button" value="上" /><input type="button" value="下" /></div>其他內容</div></div></body> </html>
?
 用法詳解)
