在容器內部從右向左生成動畫

Question

我正在嘗試將容器右側的黃色正方形朝容器的左側移動。問題是如果它沒有絕對的位置，它將無法工作。

另外我想知道如何用第二個方塊做同樣的動畫，但是它在第一個方塊後開始移動一秒。我該怎麼做？

http://jsfiddle.net/ohtkmes8/

var left = $('#coolDiv').offset().left; 
 
$("#coolDiv").css({ 
 
    left: left 
 
}).animate({ 
 
    "left": "0px" 
 
}, 9000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="coolDiv">cool</div> 
 
    <div id="coolDiv2">other text</div> 
 
</div>

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/q2kgmvog/

$("#coolDiv").animate({"left":"0px"}, 9000);

#coolDiv{ 
 
    position: absolute; 
 
    right:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="coolDiv">cool</div> 
 
    <!--<div id="coolDiv2">other text</div>--> 
 
</div>

設置position:absolute;到移動DIV & right: 0px;。

使用jQuery動畫將動畫製作爲left:0px;。

希望這會幫助你。

Answer 2

使用容器的位置：相對 和內DIV位置：絕對 你可以說向左或向右到div內的任意位置移動。