如何淡出圖像，然後讓它出現在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(); 
    );