在Internet Explorer 9中使用jQuery对子项进行动画处理时，父级div-shadow错误

当父div应用了css drop-shadow，并且使用jQuery对其子项进行动画处理以使父div更改高度时，在IE9中查看页面时会出现父div下面的奇怪行。 这是一个例子： http ： //jsfiddle.net/vPqxb/11/和截图：

对于只想看代码的人; 这是HTML：

，CSS：

 div.parent { background: #ddd; box-shadow: 1px 1px 2px 1px #c9c7c9; width: 80%; } div div { background: red; height: 10px; width: 30px; } .longer { height: 200px; } 

和JavaScript（请注意，第一个需要jQuery UI）：

 $("a.toggleclass").on("click", function() { //some trigger, doesn't matter where div.stop(true,true).toggleClass("longer", 1000); }); $("a.animate").on("click", function() { //another one without jQuery UI div.stop(true,true).animate({"height":"20px"}, function() { div.attr({"style":""}); }); }); 

我的问题是;

1. 这是jQuery还是Internet Explorer的错误？
2. 你能找到解决办法吗？ （Internet Explorer 9不支持转换，所以我一无所知）

非常感谢您的帮助。

Answer 1

这个问题很相似，我相信我提出的答案是恰当的。

简而言之： http ： //jsfiddle.net/DwApF/12/

完整说明： https ： //stackoverflow.com/a/8676063/453277

Answer 2

你的代码有点复杂。 我无法确切地说出你想要的行为是什么，但这看起来更顺畅，我觉得IE9会更好地处理它，但我无法测试。

 $("a.toggleclass").click(function() { $('.parent').animate({height: 1000}, '1000'); }); 

我更新了你的JS小提琴 。 我觉得它与.stop(true,true) 。