jQuery Animate效果以移動div

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 演示

Answer 1

不幸的是，replaceWith方法不適用於jQuery中的動畫。 相反，您可能需要找到解決方案的替代方法。 這是一個將紅色框逐漸轉換為黃色框的方法... http://jsfiddle.net/aeyg89rd/4/

我添加了以下jQuery，請注意，我使用offset（）來獲取黃色框的left和top屬性，然后使用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;
}