Вот css, html и js для воспроизведения:
HTML:
<div id="outer">
<div>123</div>
<div id="inner">345</div>
</div>
CSS
#outer {
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
}
#inner {
height: 200px;
}
JS:
$(function() {
$('#outer').click(function() {
$('#inner').slideUp();
});
});
и http://jsfiddle.net/DwApF/, а также
Какие-либо обходные пути для этой проблемы?
Попытка # 1
Это скрывает тень, а затем восстанавливает ее после завершения слайда. Это взломать решение, но это способ, которым можно обойти различные типы поведения.
Попытка # 2
Это делает одновременную анимацию как внешних, так и внутренних контейнеров. Он скользит тень без артефактов. Однако вам нужно будет вручную манипулировать высотой внешнего контейнера, а также заниматься сокрытием содержимого внутреннего контейнера. устраняет проблему с артефактом.
Попытка # 3 - Мое предпочтительное решение
Это все еще использует одновременную анимацию как внешних, так и внутренних контейнеров. Я не вижу никаких артефактов в IE9. Он также обрабатывает скрытие содержимого внутреннего контейнера с помощью overflow: hidden.
Калибровка внешнего контейнера должна выполняться вручную, но я думаю, что это адекватное решение. Должен быть способ определить свернутую высоту с помощью jQuery, чтобы это значение не требовалось жестко закодировано.
Это решение работает в IE9, Chrome и Firefox. Обратите внимание, что я добавил несколько цветов/границ, чтобы было легче видеть разные контейнеры.
Плохая новость в том, что ошибка в IE10 хуже. Хорошей новостью является то, что это простое правило, похоже, исправляет его - по крайней мере, в IE10. Поскольку IE9 поддерживает: после псевдо класса, он также должен работать.
.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}
Замените .Element либо именем класса, либо ID (#Element) объекта, который показывает артефакт.
В IE9 часто назначается переполнение: скрытый будет работать - хотя это не работает в IE10.
Это решение сработало для меня - просто анимируйте атрибут box-shadow родителя в одно и то же время:
$(function() {
$('#outer').click(function() {
$('#inner').slideUp();
$(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
});
});
Мне это показалось: просто оберните div в другой div этими стилями на внешнем div
padding-bottom: 10px;
padding-right: 0px;
overflow: visible
Не знаю, почему это сделало трюк для меня.
Решение для меня состояло в том, чтобы поместить DIV, я хотел исчезнуть внутри другого DIV, как было упомянуто ранее.... ОДНАКО..... Я не применяю к нему каких-либо специальных стилей, Вместо этого все, что я сделал, это использовать jQuery для установки на новый родительский DIV и сделать это вместо этого.
Он избавился от этих досадных теневых артефактов для меня. (на IE10)