javascript - 与 jquery animate 重叠的 div

Question

我正在使用 jquery animate() 增加和减少“行”的大小。有时该行上有一个徽章。现在，徽章在动画过程中隐藏的方式非常丑陋。已经尝试了很多东西以及 z-index 等。但不知道如何解决这个问题。 “徽章”应该留在那里而不隐藏。

Working jsfiddle

有什么建议吗？

Answer 1

我的解决方案要求您将徽章 div 移至第一个 div。希望这样可以吗？

<div style="width:100%;height:50px;border: 1px solid red;background:grey;">

    <div style="left: -moz-calc(100% - 90px); left: -webkit-calc(100% - 90px); left: calc(100% - 90px); top:25px; width:100px; height:50px; position:relative; background-repeat: no-repeat; background-size: contain; background-image:url('http://thumbs.dreamstime.com/z/winner-badge-81762.jpg');"></div>

</div>

<div id="openrow" style="width:100%; height:50px; border: 1px solid red; background:red;">
</div>

<button onclick="start();">Start</button>

https://jsfiddle.net/u0u6gsjn/12/