重叠 div 与 jquery 动画

Question

我正在增加和减少 "row" 和 jquery animate() 的大小。有时那一排有徽章。现在，徽章在动画期间如何隐藏起来非常难看。已经尝试了很多东西以及 z-index 等。但不知道如何解决这个问题。 "badge" 就呆在那里不躲。

Working jsfiddle

有什么建议吗？

Answer 1

方案一：（不好）改成abs定位

如果您将图片的定位 div 更改为绝对定位，则不会再导致它落后于顶部 div。

https://jsfiddle.net/u0u6gsjn/10/

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

解决方案 2

将子溢出设置为 overflow: visible !important 在讨论问题的类似线程中找到了答案。

JQuery: Children Disappear on Parent Size Animation

Answer 2

我的解决方案要求您将徽章 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/

重叠 div 与 jquery 动画

Overlapping div with jquery animate

html

javascript

jquery

jquery-animate