javascript - margin-left 动画到 div 的末尾

Question

我有一个包装 div(灰色背景)和里面的 5 个方 block 。按下按钮后，蓝色的移动并必须停在包装器 div 的末尾，但它在它后面。我如何让它到达 div 的末尾，而不是在它后面？

到目前为止我已经尝试过:

<button id = "start">
Start
</button>

<div style="background-color:rgb(201, 201, 201);width:80%;height:250px" id="horsewrapper">
        <div style="height: 50px; width: 100px; text-align: center; background-color: blue;" id="horse1">1</div>
        <div style="background-color:red;text-align:center;height:50px;width:100px" id="horse2">1</div>
        <div style="background-color:green;text-align:center;height:50px;width:100px" id="horse3">1</div>
        <div style="background-color:yellow;text-align:center;height:50px;width:100px" id="horse4">1</div>
        <div style="background-color:orange;text-align:center;height:50px;width:100px" id="horse5">1</div>
    </div>

演示可以在这里找到: https://jsfiddle.net/wqrun6ny/2/

谢谢

Answer 1

https://jsfiddle.net/wqrun6ny/3/

Margin 100% 将边距添加到元素的宽度。为避免这种情况，您应该将等于元素宽度的左属性添加到动画函数中:

$('#horse1').animate({"margin-left":"100%", 'left': -100} ....

但只有当元素有 position:relative 时它才会起作用