右から左にコンテナ内のアニメーションを生成する

Question

コンテナの左側にある黄色の四角形をコンテナの左側に移動しようとしています。問題は、絶対位置がないと動作しないということです。

また、2番目の四角形で同じアニメーションを行う方法を知りたいが、最初の四角形の後に1秒移動するようになっている。どうしたらいいですか？

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

ここでは、移動のdiv & right: 0px;にposition:absolute;を設定するソリューション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>

で行きます。

left:0px;にアニメーションを使用してアニメーションをjQueryアニメーションします。

希望すると、これが役立ちます。

Answer 2

コンテナに位置使用：相対 と内側のdivの位置：絶対 をそして、あなたは左またはdivの内の任意の場所に移動する権利を言うことができます。