jQueryでフェードイン(fadeIn)しない場合は

2016年09月26日

  1. TOP
  2. BLOG
  3. HTML
  4. jQueryでフェードイン(fadeIn)しない場合は

jQUeryのfadeIn()で格好良く表示させようと思ったらfadeInしないで「即表示した」もしくは「表示されない」といったことがありました。その他にも原因はあると思いますが私がハマったのは以下のケースです。

前提

条件:以下のdivタグをjqueryを使って一旦消してから表示したい

◆HTML

<div id="box"></div>

◆CSS

#box {
width: 150px;
height: 150px;
display: block;
background: #999;
}

解決案

$("#div").hide().fadeIn();

これ考え方が悪かったのですがフェードインは透明度をどんどん低くして不透明にすることだから、

display: noneで非表示にするのではなく透明度を設定するopacity: 0にしていたのがまずかった・・・・。
これが原因でfadeInしませんでした・・・・