ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

【jQuery】fadeでdisplay:inline-blockにする

f:id:katamichinijikan:20181008143625j:plain

fadeInfadeOutfadeToggleなどを使って表示・非表示を切り替えるのは便利な一方で少し不便なポイントもあります。それは、fadeを使うとdisplayの値が「none」で「block」切り替わるということです。

デザイン上の都合で表示する時は「block」ではなく「inline-block」にしたい場面に遭遇しましたので対策を紹介します。

 

以下は通常のfadeIn・fadeOutの例です。

//表示する(display:block)
$("#dririum").fadeIn(500);
//隠す(display:none)
$("#dririum").fadeOut(500);

 

「inline-block」にする場合にはこうします。

//表示する(display:inline-block)
$("#dririum").fadeIn(500).css("display","inline-block");
//隠す(display:none)
$("#dririum").fadeOut(500);

 

力業感は否めないのですが、調べてみると結局これが一番シンプルでわかりやすいように思いました。