jQueryのfadeOutで消える要素、の下の要素を、ゆっくりと上にあげたい

Question

###前提・実現したいこと
.itemをfadeOutさせるとき、下の.boxが上にきます。
これをゆっくりと、1秒かけて上にもっていきたいです。

具体的に、以下の流れを目指したです。

クリック：.itemのfadeOutスタート & .boxを上にゆっくり移動するのスタート
↓1秒後
処理完了：.itemのfadeOut完了 & .boxの移動完了

###発生している問題
ゆっくりと上にもっていく方法がわかりません。

###該当のソースコード

<div class="wrap">
  <div class="item"></div>
  <div class="box"></div>
</div>
<button type="button" class="fadeOut">fadeOut</button>
<button type="button" class="fadeIn">fadeIn</button>

.wrap {width: 100%; height: 100px;}
.item {background:skyblue; width: 100%; height: 50px;}
.box {background: salmon; width: 100%; height: 50px;}

$('.fadeOut').click(function(){
	$('.item').fadeOut(1000);
});
$('.fadeIn').click(function(){
	$('.item').fadeIn(1000);
});

###試したこと
fadeOutが1000なので、CSSにtransitionとして1sを追加すれば、.boxが移動する時間はfadeOutと同じ時間でゆっくりになると思いました。（jQueryの1000 = CSSの1s = 1秒）

.wrap {width: 100%; height: 100px;}
.item {background:skyblue; width: 100%; height: 50px;}
.box {background: salmon; width: 100%; height: 50px;}
.box {transition: 1s;} /* transition を追加 */

そしてjQueryの方はクリック時にすぐにboxが移動しはじめるように.itemにabsoluteをつけました。

$('.fadeOut').click(function(){
	$('.item').fadeOut(1000);
	$('.item').css('position','absolute'); // .itemをabsoluteにして、下の.boxが fadeOut完了を待たずにすぐに上に移動しはじめるように追加
});

$('.fadeIn').click(function(){
	$('.item').fadeIn(1000);
	$('.item').css('position','relative'); // 同じ意図で追加
});

以上の変更を加えても意図した動作が実現できませんでした。
宜しくお願い致します。

Answer 1

fadeInは指定がないですか？

  $('.fadeOut').click(function(){
    $('.item').fadeOut(1000).queue(function(){
      $('.box').css({"margin-top":$('.item').height(),position:"absolute"}).animate({"margin-top":0},1000).delay(1000).queue(function(){
        $(this).css({"margin-top":"","position":""}).dequeue();
      });
      $(this).dequeue();
    });
  });

Comments

[kuragera]

そちら.itemはゆっくりでなくカチっと上にあがるような挙動でした。fadeOutの挙動はhope_mucciさんのサンプルの通りです。

>fadeInは指定がないですか？
fadeOutと真逆の挙動を考えていますが苦戦していますのでもし謎が解けましたらまたお願い致します。

[yambejp]

やはりfadeInもいるのですね・・・
https://codepen.io/yambejp/pen/YzpVmbY

[kuragera]

はい。丁寧なコードでありがとうございます。相当難しそうですねこれは。fadeOutの挙動はhope_mucciさんのサンプルの通りで、つまり以下２つの挙動が同時並行で行われるものをイメージしています。
>.itemのfadeOutスタート & .boxを上にゆっくり移動するのスタート

queueの使い方はhope_mucciさんのものと違い参考になりました。

[yambejp]

あー並行でいいんですね？
それなら楽だと思います

$(function(){
$('.fadeOut').click(function(){
$('.item').animate({opacity:0,height:0},1000);
});
$('.fadeIn').click(function(){
$('.item').animate({opacity:1,height:50},1000);
});
});

[kuragera]

animateにopacityをそう加えれあばよかったのですか。どうもありがとうございました。

Answer 2

ちょうどこのサイトに複数のアニメーションを並列制御するための方法が書かれていますので参考にしてください。

アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）

オプションパラメータのqueueでアニメーションの並列制御が可能です。

$('.fadeOut').click(function(){
    $('.item')
      .fadeOut({duration:1000, queue:false})
      .slideUp({duration:1000, queue:false});
});

サンプル：
https://codepen.io/haruyan-hopemucci/pen/Vwmbyyz

fadeOutは簡単ですが、fadeInはopacity処理の関係で難しいようです。
いろいろと工夫してみてください。

Comments

[kuragera]

サンプル思った通りの挙動でした。ありがとうございました。
仰る通りfadeInは難しいですね。苦戦中です。