動畫是與其他對象jquery

Question

我有問題，當我開始一個對象的動畫另一個也在移動。 所以我需要左側的固定div元素。 我需要設置一些z-index？

<div id="obsah"> 
    <div class="item colorBlue"> 
     <p>spousta textu</p> 
    </div> 
    <div class="item colorPurple"> 
     <p>spousta textu</p> 
    </div> 
    <div class="item colorGreen"> 
     <p>spousta textu</p> 
    </div> 
    <div class="item colorYellow"> 
     <p>spousta textu</p> 
    </div> 
    <div class="item colorRed"> 
     <p>spousta textu</p> 
    </div> 
</div> 

$(document).ready(function() { 
    $(".item").click(function() { 
     var div=$(this); 
     div.animate({left:"110px",width:'600px'},"slow"); 
     div.animate({height:'600px'},"slow"); 
    }); 
}); 

http://jsfiddle.net/X6S3d/

Answer 1

由於div元素膨脹時，它們正在推動他們下面的那些了。要停止這種行爲，您需要在其上使用position: absolute，然後手動設置它們的top位置。類似這樣的：

.item { 
    background-color: black; 
    width: 100px; 
    height: 100px; 
    margin-bottom: 10px; 
    position: absolute; 
} 
.colorBlue { 
    background-color: #33B5E5; 
    top: 10px; 
} 

等等對於其他顏色類。

Updated fiddle