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