<!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>