Jquery IE9中动画期间的阴影瑕疵

以下是要复制的css、html和js：

html:

js:

而且

这个问题有什么解决办法吗

尝试#1

这会隐藏阴影，然后在幻灯片完成后将其恢复。这是一个解决方案，但这是一种可以规避各种行为的方式

尝试#2

这将同时对外部容器和内部容器进行动画处理。它可以滑动阴影，而不产生任何瑕疵。但是，您需要手动操作外部容器的高度，还需要处理隐藏内部容器的内容。但它确实消除了工件问题

尝试#3-我的首选解决方案

这仍然同时使用外部/内部容器的动画。我在IE9中没有看到任何瑕疵。它还可以使用

溢出：hidden

隐藏内部容器的内容

外部容器的大小调整仍然必须手动完成，但我认为这是一个足够的解决方案。应该有一种使用jQuery确定折叠高度的方法，这样就不需要硬编码该值

---

此解决方案适用于IE9、Chrome和Firefox。请注意，我添加了一些颜色/边框，以便更容易看到不同的容器。

此解决方案对我有效-只需同时设置父对象的“长方体阴影”属性的动画：

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});

---

坏消息是IE10中的错误更严重。好消息是，这个简单的规则似乎可以解决这个问题——至少在IE10中是这样。因为IE9支持：after伪类，所以它也应该可以工作

.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}

用显示工件的对象的类名或ID（#元素）替换.Element

---

在IE9中，通常分配overflow:hidden会起作用，但在IE10中不起作用。

这似乎对我起作用：只需在外部div上使用这些样式将div包装到另一个div中

padding-bottom: 10px;
padding-right: 0px;
overflow: visible

---

不知道这为什么会对我起作用。

我的解决方案是将我想要消失的DIV放入前面提到的另一个DIV中。。。。然而。。。。。我没有对它应用任何特殊的样式。相反，我所做的只是使用jQuery将新的父DIV作为目标并使其消失

---

它帮我摆脱了那些讨厌的阴影。（关于IE10）

+1-这确实是一种令人讨厌的行为。我认为没有。看起来像一个IE9 bug，@JoshSmith-谢谢你把这个问题联系起来；我发布了解决方案#3作为答案。@zerkms-我认为同步动画（解决方案#3）可能是一个可行的解决方案技巧不适用于我的开发代码（比示例稍微复杂），但这是我应该自己解决的难题。谢谢：-）我也有同样的问题（）。那么这肯定是个bug？不管怎么说，答案很好；谢谢您可以使用初始的JSFIDLE并对其进行相应的修改吗？效果很好，对于行高：0和内容：“beautifull”效果更好。这正是我需要的解决方案。只需更改

内容：“”；身高：0
$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});

.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}

padding-bottom: 10px;
padding-right: 0px;
overflow: visible