イメージをフェードアウトし、jqueryの別の位置に表示させる方法は？

Question

私の画像はいくつかのdivにあり、Z-インデックスは最高です

私が何かをクリックすると、フェードアウトし、別の指定された位置でフェードインします。別のクラスの画像の下に：）それは "aaa"クラスです。

私はそのようにそれをやっていた：

  $('img.classy').fadeOut(); 
      $('img.classy').css('top',$(el).find('img.aaa:last').height()+60); 
      $('img.classy').fadeIn(); 

イベントをクリックして埋め込まれます。私がそれを実行してそのエリアをクリックすると、img.classyはまずポジションを変更し、新しいポジションでフェードアウトしてフェードインします。フェードアウト - >不可視の位置を変更 - >新しいフェードインポジション。どうやってするの？

Answer 1

fadeOutが完了するまで待つ必要があります。私はあなたのためのコールバック関数を追加しました。

$('img.classy').fadeOut('slow', function() { 
    $(this).css('top',$(el).find('img.aaa:last').height()+60); 
    $('img.classy').fadeIn(); 
}); 

Answer 2

これが行います。

$('img.classy').fadeOut(function() { 
    $('img.classy').css('top',$(el).find('img.aaa:last').height()+60); 
    $('img.classy').fadeIn(); 
}); 

をfadeOutとfadeInが非同期機能であるため、スクリプトがあなたimgの原因となるものは、すぐにその位置を変更するには、実行し続けます。

Answer 3

これは、IMGのクローンを作成し、それを削除し、それを追加しanothorラッパーます：

.aaa {position: relative} 
    .classy {position: absolute; right:0; top:0} 

    $('img.classy').fadeOut(
     cloned = $(this).clone(true); 
     $(this).remove(); 
     $("img.aaa:last").append(cloned); 
     $(".classy").fadeIn(); 
    );