在容器内部从右向左生成动画

我正在尝试将容器右侧的黄色正方形朝容器的左侧移动。问题是如果它没有绝对的位置，它将无法工作。在容器内部从右向左生成动画

另外我想知道如何用第二个方块做同样的动画，但是它在第一个方块后开始移动一秒。我该怎么做？

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>

来源

2017-08-29 yavg

要将元素移动到容器中的任意位置，它*将从文档流中移除，因此需要'position：absolute'。在大多数情况下，容器也需要'position：relative'。 –

@RoryMcCrossan不适合我职位相对 – yavg

正是我的观点... –

在这里，你去了一个解决方案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;。

希望这会帮助你。

来源

2017-08-29 16:34:07 Shiladitya

容器在哪里？ – yavg

@yavg。没有得到你，你是什么意思“\t 哪里是容器??” – Shiladitya

对不起！你能看看我的jsdfiddle吗？我忘了把链接！ – yavg

使用容器的位置：相对和内DIV位置：绝对你可以说向左或向右到div内的任意位置移动。

来源

2017-08-29 16:33:11

对不起！你能看看我的jsdfiddle吗？我忘了把链接！ – yavg

在容器内部从右向左生成动画

回答

相关问题