javascript - 从右到左在容器内生成动画

Question

我正在尝试将容器右侧的黄色方 block 移向容器的左侧。问题是，如果没有绝对的位置，它就行不通。

我还想知道如何对第二个方 block 执行相同的动画，但它在第一个方 block 之后开始移动一秒。我该怎么做？

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;。

希望这对您有帮助。