JQuery实现的模块交换动画效果
Posted 游子日月长
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery实现的模块交换动画效果相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于JQuery实现的模块交换动画效果的主要内容，如果未能解决你的问题，请参考以下文章