javascript - jqueryで.beforeを使用しながら要素をアニメーション化する方法

Question

.item 要素を .content 要素の前に追加したいのですが、以前の場所から .item を削除して .content の前に追加するだけです。

私が望むのは、元の位置から .item 要素をゆっくりと削除し、新しい位置にゆっくりと表示されるアニメーションを使用することです..どうすればこれを行うことができますか?

$Item = $('.item');
$('.content').before($Item);

よろしく。

Answer 1

このようなものはどうですか：

$Item = $('.item');
$Item.fadeOut(1000, function() {
   $('.content').before($Item);
   $Item.fadeIn(1000);
}

この.fadeOut()メソッドは、指定された時間 (ミリ秒単位) で要素をフェードし、完了時に関数を呼び出します。関数は要素を移動してフェードインします。

デモ: http://jsfiddle.net/9gGAT/5/

Answer 2

jqueryのhideandメソッドを使用して、スライド効果を実現することもできます。showまた、トランジションを独自のメソッド内にパッケージ化して再利用できるようにすることで、同じコードを何度も記述する必要がなくなります。

var smoothLikeSilk = function(mover, before) {
     $item = $(mover);
     $content = $(before);
   $item.hide('slow', function() {
     $content.before($item);
     $item.show('slow');
   });
}

$(function(){

  $('#btnMove').on('click',function(){
    smoothLikeSilk('.item', '.content');
  });

});

http://jsfiddle.net/9gGAT/6/

Answer 3

次のような意味ですか: jsFiddl リンク

Answer 4

これを試して、

$(function() {

    $('#btnMove').on('click', function() {
        $Item = $('.item').fadeOut('slow', function() {
            $('.content').before($Item);
             $Item.fadeIn('slow');
        })

        });

    });​

デモ