jQueryのslideDown、slideUpのアニメーションがおかしくなるバグ

  • 更新日:
  • 公開日:

jQueryでプルダウンメニューを実装したときの話です。

プルダウンメニューにjQueryのslideDownslideUpでプルダウンメニューを作成し、マウスを載せてホバー状態にさせてみると挙動がおかしい。アニメーションが表示されないんですね。

本来なら「ヌルッ」としたスライドのアニメーションになるのですが。マウスホバーで「パッ」と表示され、マウスアウトで「パッ」と消える。そのときのjQueryのソースコードは以下です。

「sub-menu」のクラスが付与されたulをアニメーションさせたいワケなのです。それで、このバグは僕の場合、ulタグにCSS3の「transition」を設定していたのが原因でした。もしtransitionが設定されていたら削除して下さい。

jQueryでアニメーションさせるのに、わざわざCSSでもアニメーションを設定する必要はありませんからね。(なんで付けてたんだ)

ちなみに上記ソースコードはこちらの本を参考にしていています。

それでも解決しないなら…

その他にも原因が幾つかあるようで、せっかくなので別の場合の解決策が書かれたページを参考に貼っておきます。CSSが大体悪さをしていることが多いようなので、まずCSSのプロパティを疑ってみるのが良いかもしれません。

jQuery slideUp slideDownがうまく動かない現象 | なんでも独り言

[jQuery] slideDown() のアニメーションが動かないときの解決方法 | CodeNote.net

頑張らないために頑張るブログ jQueryのslideDownのアニメーションがガタつく

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone