jQueryで画像をフェードインした時のレイアウト崩れについて

Question

表題の通りです。

jQueryで背景画像をフェードインした時に背景画像のレイアウト崩れが起きてしまします。

やりたい動きの参考サイトです

http://homemadegarbage.0t0.jp/jquery-bg-crossfade

#mainImageContainerをjQuetyで呼び出した時に、#mainImageContainerの左右に設置した画像の内、右側の画像がボックス外（ボックスの直下）にずれてしまいます。

jQueryでフェードインをしない状態であれば、正常に表示されます。

宜しくお願いします。

<div id="mainImageContainer"><!--flexbox用—>
  <img src="main3_left.png" height="100%"/>
  <img class="logo" src="logo.png"/>
  <img src="main3_right.png" height="100%"/>
</div>

#mainImageContainer{
  height:100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border: 1px solid rgb(235, 55, 38);
  display: none;
}

  $(function () {

          $("#mainImageContainer").fadeIn(2000);

});

Comments

[kszk311]

とりあえず、「<!--flexbox用—>」を正しいコメント表記にしましょう。→<!-- flexbox用 -->

Answer 1

当方の環境では問題が再現しませんでしたが、気になる点があります。

#mainImageContainer{
  height:100vh;
  display: flex;
/*...*/
  display: none;
}

この記述だと、flexにならないのではないでしょうか。
fadeInメソッドが終わった後のスタイルを見てみましたが、display:blockとなっていました。

解決法としてお手軽なのは、flexの要素をdisplay:noneの要素でラップする、ではないかなと思います。