jQueryのアニメーション フェードアウト

Question

jQueryのアニメーーションですが
フェードアウトではなくて、要素を下に下げて画面から見えなくするフェードアウトの仕方はありますか。

Comments

[m.ts10806]

「ありますよ」だけの回答でいいんですよね。この質問の仕方だと

[miyabi_pudding]

まずは、自分でやってみたコードを記載するのと、
どこまで自分で調べたかも記載してください。
今のままだと、丸投げの質問ですし、
あえて回答すると、
”いくらでも方法ある”で終了です。

Answer 1

jQuery アニメーション（使い方やサンプル）/ Web Design Leaves
上記サイトのアニメーション・サンプル５が近いかと思われます

Answer 2

消えた後のスペースをどうしたいかによりますね

<style>
#hoge{width:500px;height:100px;background-Color:yellow}
</style>
<script>
$(function(){
  $('#hoge').on('click',function(){
    var opt={
    height:$(this).height(),
    width:$(this).width(),
    top:$(this).offset().top,
    backgroundColor:$(this).css('backgroundColor'),
    position:'absolute',
    };
    var cln=$(this).clone(true).attr('id',null).css(opt);
    $(this).after(cln).css('visibility','hidden'); //スペースを残しておく
    //$(this).after(cln).css('display','none'); // スペースを消す
    cln.animate({top:$(window).prop('outerHeight')},500).queue(function(){
      $(this).dequeue();
      $(this).remove();
    });
  });
});
</script>
<div>test</div>
<div id="hoge">hoge</div>
<div>test</div>