jquery動畫效果移動div

我想能夠添加一個動畫到這個簡單的查詢當div轉換到新的位置。jquery動畫效果移動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

來源

2014-12-29 CYBERSIX

他們應該在哪裏移動？你的意思是在頁面加載中＃2替換＃4的位置？ – jmore009

一旦屏幕寬度發生變化，但我還沒有添加，但.. – CYBERSIX

你的意思是像（例如）這樣？ http://jsfiddle.net/4b0868ft/ –

不幸的是，replaceWith方法不能與動畫jQuery的工作。相反，您可能需要爲您的解決方案找到一種替代方法。這裏是一個緩慢地過渡黃色框頂部的紅色框... http://jsfiddle.net/aeyg89rd/4/

我添加了以下jQuery，請注意我使用offset（）來獲得黃色框的左側和頂部屬性，然後我移動了（）紅色框中的左側和頂部位置使用動畫：

$(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; 
}

來源

2014-12-29 03:39:50 Bolboa

jquery動畫效果移動div

回答

相關問題