By U Zensen.

欲しいものはプログラミングで自分で作る。

jQueryのfadeIn()やshow()などの表示がうまくいかない原因!!

2016 / 7 / 5 2016 / 8 / 7
jQuery
jQueryの表示系メソッドがうまく動かない時の解決方法

はじめに!!

お疲れ様です!ぴーすけです!

jQueryで要素をじわーっと表示したり非表示にしたりするメソッドとして、fadeIn(),fadeOut(),show(),hide()がありますよね。

なぜかそれらのメソッドがうまく動かない現象が起こったので原因を調べました。そして、その原因を突き止めたので報告します。

スポンサードリンク

本来はこんな動き!!

うまく見えていますか?左がfadeOutとfadeInで右がhideとshowです。

しかし、ある状態でこのメソッドを使うとこんな感じになっちゃいます。

うまく動かない!!

気持ち悪いですね。環境によってパッと消えてパッと表示されたり、消えたり表示されたり不安定な挙動をします。

何が原因かというと以下のスタイルが効いていたためでした。

css

transition: 0.2s;

このtransitionというスタイルは時間的変化を設定できるプロパティです。どういうことかというと、スタイルを動的に変化させる際にこのプロパティが効いていると、変化前から変化後までの間を保管してスムーズにスタイルを変更してくれるスタイルです。

いまどきなWEBサイトでは多く使われていて、色をふわっと変えたりする際に良く使われています。

fadeIn(),fadeOut(),show(),hide()などのメソッドを使う要素にこのスタイルが指定してあるとうまく表示されないようです。

まとめ!!

fadeIn(),fadeOut(),show(),hide()がうまく動作しない場合には、transitionが設定されていないか確かめてみましょう!!

Pocket

コメント

コメントを残す