Я увеличиваю и уменьшаю размер «строки» с помощью jquery animate(). Иногда в этой строке есть значок. Теперь его довольно уродливо, как значок спрятан во время анимации. Уже пробовал много вещей, а также z-index и т. Д. Но не знаю, чтобы исправить это. «Значок» должен просто оставаться там, не скрываясь.Перекрытие div с анимацией jquery
Любое предложение?
Моего решение требует, чтобы переместить значок в 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>
отличная мысль. Никогда не думал об этом. Должен переработать мою функцию немного, но я думаю, что это делает трюк спасибо! –
Решение 1: (Непригодно) Измените положение абс.
Если вы измените позиционирование изображения 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 ответ был найден в аналогичной задаче нить обсуждения.
Похоже, что это работает, но вы немного обманули. Изображение div больше не относится к его контейнеру. Вам также пришлось изменить атрибут top div изображения на 30px, но это 30px от вершины документа. –
Извините, я не могу принять, потому что мне определенно нужен относительный, поскольку я создаю много строк, и это не работает. –
Согласно другому аналогичному вопросу во время анимации переполнение родительского объекта устанавливается в скрытое, что вызывает это. Вы можете заставить его отображать, установив для дочернего элемента 'overflow: visible! Important'. Вот рабочий скрипт https://jsfiddle.net/u0u6gsjn/16/. Вот аналогичная нить: http://stackoverflow.com/questions/5411506/jquery-children-disappear-on-parent-size-animation – Duncan
Просто, чтобы очистить что-нибудь. Другой div не перекрывает значок. Второй div, содержащий div для изображения, устанавливается на переполнение: скрыто во время анимации. Все, что находится за пределами div, не будет отображаться. –