Jquery 动态交换两个div位置并添加Css动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jquery交换Div位置</title>
</head>
<body>
    <div id="top" style="width:100%;height:100px">
        <div id="topDiv" style="width:100%;height:100%;background-color:lightcoral;float:left;"></div>
        <div style="clear:both"></div>
    </div>
    <div style="width:100%;height:1000px">
        <div id="left" style="width:10%;height:100%;background-color:lightgreen;float:left;"></div>
        <div id="right" style="width:90%;height:100%;background-color:lightgray;float:left;">
            <h1>&nbsp;&nbsp;<a id="changeDiv" href="javascript:;">交换</a></h1>
        </div>
        <div style="clear:both"></div>
    </div>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#changeDiv").click(function () {
                changePosition($("#topDiv"), $("#left"));
            });
        });
        function changePosition(select1, select2) {
            var removeDiv1 = select1;
            var removeDiv2 = select2;
            var appendToObj1 = hasBorther(removeDiv1);
            var appendToObj2 = hasBorther(removeDiv2);
            addCartoon(removeDiv1, removeDiv2);//添加动画
            //移动两个容器
            removeDiv(appendToObj1, removeDiv2);
            removeDiv(appendToObj2, removeDiv1);
        }

        //判断其后边是否存在兄弟元素
        function hasBorther(va1) {
            if (va1.next()[0]) {//兄弟元素
                return { bor: va1.next() };
            } else {
                return { par: va1.parent() };//父元素
            }
        }
        //保证位置正确
        function removeDiv(app, Div) {
            if (app.bor) {//兄弟元素
                Div.insertBefore(app.bor);
            } else {
                Div.appendTo(app.par);
            }
        }

        //移动时之前------添加动画
        function addCartoon(a, b) {
            var clearTransform = function (Div, time) {
                setTimeout(function () {
                    Div.css({ 'transform': 'inherit', '-webkit-transform': 'inherit' });
                }, time)
            }
            //记录两容器原始高宽
            var oldOpt = { ax: a.width(), ay: a.height(), bx: b.width(), by: b.height() };

            //获取两容器屏幕位置
            var a_pos = a.offset();
            var b_pos = b.offset();
            //获取两容器偏移值
            var offset_x = a_pos.left - b_pos.left;
            var offset_y = a_pos.top - b_pos.top;

            //第一个花括号里面是动画内容，可以为空，但不能省去中括号
            a.animate({}, function () {
                var offset_x_ = -offset_x; //偏移值取反
                var offset_y_ = -offset_y;
                var transformStr = 'rotate(360deg) translate(' + offset_x_ + 'px,' + offset_y_ + 'px)';
                a.css({ 'width': oldOpt.bx + 'px', 'height': oldOpt.by + 'px', 'transform': transformStr, '-webkit-transform': transformStr });
                clearTransform(a, 0);
            })

            b.animate({}, function () {
                var transformStr = 'rotate(360deg) translate(' + offset_x + 'px,' + offset_y + 'px)';
                b.css({ 'width': oldOpt.ax + 'px', 'height': oldOpt.ay + 'px', 'transform': transformStr, '-webkit-transform': transformStr });
                clearTransform(b, 0);
            })
        }

        function changePosition2() {
            var select1 = $('#select1');
            var select2 = $('#select2');
            if (select1.val() != select2.val()) {//不同元素  位置交换
                var removeDiv1 = $('#' + select1.val());
                var removeDiv2 = $('#' + select2.val());
                var appendToObj1 = hasBorther(removeDiv1);
                var appendToObj2 = hasBorther(removeDiv2);
                addCartoon(removeDiv1, removeDiv2);//添加动画
                //移动两个容器
                removeDiv(appendToObj1, removeDiv2);
                removeDiv(appendToObj2, removeDiv1);

            } else {
                alert('请选择不同元素交换位置！');
            }
        }
    </script>
</body>
</html>
【jquery 交换位置】jquery交换Div位置

Jquery 动态交换两个div位置并添加Css动画效果

猜你喜欢
