A要素がdisplay:noneが適用された場合B要素を滑らかに動作させる

Question

おはようございます。
下記のようなコードで.removeがfadeOutによりdisplay:noneになった後に
.remainがカクっと上に繰り上がって表示されると思います。
.remainの表示方法について、なんらアニメーションを設定していないため、当然ではあるのですが
これを滑らかに上に繰り上げる方法や実務上用いられるコーディングのアドバイスをいただければ幸いです。

.remove要素はfadeOutによりhideする前提です。
よろしくお願い申しげます。

Jsfiddle

<div class="remove">remove</div>
<div class="remain">remain</div>

.remove{
  background:red;
}

.remain{
  background:blue;
}

```javascript
$(function(){
 $('.remove').on('click',function(){
  $(this).fadeOut('slow');
 })

})

Answer 1

fadeOutをやめて透明にしたあとスライドアップしては？

$(function(){
  $('.remove').on('click',function(){
    $(this).animate({opacity: '0'},1000).slideUp();
  });
});

Comments

[SugiuraY]

yambejp様
ご回答有難うございます。
このようなアニメーションをつけることができるのですね！
ためしに透明化をせずに実行もしてみたのですが、透明化をはさんだほうが自然で一つ勉強になりました。
宜しくお願い申し上げます。

[yambejp]

個人的にはslideUpだけでもいいかと思ったのですが、
主題としてfadeOut的なことをしたいのかとおもったので
透明処理をいれてあります、お好きに応用ください

[SugiuraY]

ご丁寧にありがとうございます。
改めて御礼申し上げます。