Question

点击时，我正试图为div设置动画。如果单击div，它应该设置动画并与第一个div交换，并且还应更新DOM。问题现在是te distance变量。我无法计算两个div之间的距离。

<div id="container">
    <div id="one" class="move">div 1</div>
    <div id="one" class="move">div 2</div>
    <div id="one" class="move">div 3</div>
</div>

var animating = false;

$('#container').on('click', '.move', function (e) {

    var clickedDiv = $(this).closest('div'),
        prevDiv = $("#one"),
        //distance = clickedDiv.offset.left - $("#one").offset.left;
        distance = 60; //manually set

    if (prevDiv.length) {
        animating = true;
        $.when(clickedDiv.animate({
           left: -distance
        }, 2000),
        prevDiv.animate({
            left: distance
        }, 2000)).done(function () {
            prevDiv.css('left', '0px');
            clickedDiv.css('left', '0px');
            clickedDiv.insertBefore($("#one"));
            animating = false;
        });
    }
});

#container {
    color:#fff;
    position: relative;
    text-align: center;
}

#container div {
    position: relative;
    background:#ff00ab;
    padding:5px;
    border-radius:3px;
    text-align:center;
    display:inline-block;
    margin: 20px;
}

Answer 1

实际上，您的jQuery选择器未能找到相应的divs。

.move是您的<a>代码，您所做的是：

// Select the first <a> tag!!
prevDiv = $(this).first();
// Try to insert a div before the <a> tag
clickedDiv.insertBefore(prevDiv);

我用优秀的选择器更新了JSFiddle：http://jsfiddle.net/jpreynat/sh9vbbum/1/

Answer 2

你应该为css设置动画=，我说的是z-index属性。基本上如果你想让div在另一个div之上，它应该比你试图隐藏的那个高z-index。

以下是操作z-index的W3C官方页面： http://www.w3.org/wiki/CSS/Properties/z-index

单击动画div并更新DOM

2 个答案: