Question

我希望能够在div转换到新位置时为此简单查询添加动画。

<div class="container">
    <div class="left-side-bar">
        <div class="long blue" id="1">
            1
        </div>
        <div class="short red" id="2">
            2
        </div>

    </div>

    <div class='middle-side-bar'>
        <div class='long green' id="3">
            3
        </div>

    </div>

    <div class='right-side-bar'>
        <div class='short yellow' id="4">
            4
        </div>
    </div>

</div>

CSS

.left-side-bar{
    clear: both;
    width: 32%;
    text-align: center;
    float: left;
    margin-top: 1%;
    margin-bottom: 100px;

}

.middle-side-bar{
    width: 32%;
    text-align: center;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.right-side-bar{
    width: 32%;
    text-align: center;
    float: left;    
    margin: 1% 0 1% 1.6%;
}

.green {
    background-color: green;
}

.long {
    height: 300px;
}

.short {
    height: 200px;
}

.red {
    background-color: red;

}

.blue {
    background-color: blue;
}

.yellow {
    background-color:  yellow;
}

基本上我希望div作为动画过渡移动到新的位置，而不是简单地出现。

这里是jsfiddle DEMO

Answer 1

不幸的是，replaceWith方法不适用于jQuery中的animate。相反，您可能需要为解决方案找到另一种方法。这是一个慢慢转换黄色框顶部红色框的人...... http://jsfiddle.net/aeyg89rd/4/

我添加了以下jQuery，请注意我使用offset（）来获取黄色框的左侧和顶部属性，然后使用animate（）将红色框移动到左侧和顶部位置：

$(document).ready(function () {
    var num4 = $("#4").offset();
    $("#2").animate({ top: num4.top, left: num4.left }, 1000);
});

我为.red类更改了一些CSS属性，以便我可以使用上面的jQuery代码移动它。更具体地说，我将其位置更改为绝对位置，并给它一个宽度尺寸：

.red {
    position: absolute;
    top: 320px;
    background-color: red;
    width: 150px;
}

Jquery Animate效果移动div

1 个答案: