Question

我使用jquery animate()来增加和减少“行”的大小。有时在该行上有徽章。现在，在动画中隐藏徽章的方式非常难看。已经尝试了很多东西，还有z-index等。但是不知道要解决这个问题。 “徽章”应该留在那里而不会隐藏。

有什么建议吗？

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/

Answer 2

解决方案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

用jquery动画重叠div

2 个答案: