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实现的模块交换动画效果

相关推荐
