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

fadeIn、fadeOut、fadeToggleなどを使って表示・非表示を切り替えるのは便利な一方で少し不便なポイントもあります。それは、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);

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