jQuery の slideDown() のアニメーションが動かないときの解決方法をご紹介します。

普通に使う分には問題ないのですが、divを入れ子にしたような構造で使う場合に slideDown() を呼び出してもアニメーションが動かず、show() を呼んだときのようなパッと表示されてしまいました。

以下に、アニメーションが動かなかったときのHTMLと、解決したJavaScriptのコードを記載します。

.show().slideDown() のメソッドチェーンで解決する

// 一旦、内部elementを非表示にする
$('#content-inner').hide();

// 外側のelementを表示してから slideDown()
$('#content-outer').show().slideDown();

// 最後に、内部のelementにも slideDown()
$('#content-inner').slideDown();

slideUp() は普通に使うだけ

$('#content-outer').slideUp();
$('#content-inner').slideUp();

---

参考情報

・javascript - jQuery slideDown() animation not working - Stack Overflow

・codeigniter - JQuery slidedown effect not working? - Stack Overflow

・slideDown([speed], [callback]) - jQuery 日本語リファレンス

・slideUp([speed], [callback]) - jQuery 日本語リファレンス