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のアニメーションがガタつく

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/jquery-slidedown-slideup/trackback/