親div Internet Explorer 9で子をアニメーション化するときのバグ

Question

親divにCSSドロップシャドウが適用され、その子がjQueryでアニメーション化され、親divが高さを変更すると、 IE9でページを表示すると、親divが表示されます。 http://jsfiddle.net/vPqxb/11/とスクリーンショット：：ここでは一例であるだけで、コードを見てみたい1については

。

<div class="parent"> 
    <div class="longer">&nbsp;</div> 
</div> 

、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を必要とすることに注意してください）：ここではHTMLで

$("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

This questionも同様です。私が提案した答えは適切だと思います。簡単に言うと

：http://jsfiddle.net/DwApF/12/

詳しい説明：https://stackoverflow.com/a/8676063/453277

Answer 2

コードは少し複雑です。私はあなたの望む振る舞いが何であるかを正確には伝えられませんでしたが、これはよりスムーズに見え、IE9がそれをより良く扱うように感じますが、私はテストできませんでした。

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

JS Fiddleが更新されました。私はそれが.stop(true,true)と関係があるように感じる。