アニメーションを完了した後に要素を切り離して移動する

Question

各項目に閉じるボタンが付いた項目のリストがあります。クリックすると、アニメーションが再生され、スライドのリストが表示され、アイテムは正常に削除されます。

$(document).on("click", ".close-button", function(e) { //removes with animation 
    $(this).parent().animate({ 
     opacity: 0 
    }, 250, function() { 
     $(this).animate({ 
       marginBottom: 0 
      }, 250) 
      .children() 
      .animate({ 
       padding: 0 
      }, 250) 
      .wrapInner("<div />") 
      .children() 
      .slideUp(250, function() { 
       $(this).closest(".element").remove(); 
      }); 
    }); 
}); 

上記のコードを修正して、アイテムを削除する代わりに、アイテムをデタッチして別のビューに移動するようにしました。私はこれを、以下のコードを使って無駄にしようとしました。 $(this).closest('.element').detach().prependTo('#diff-view').hide().slideDown(250)

アニメーションを削除すると、要素が別のビューに正常に移動します。

$(document).on("click", ".close-button" ,function(e) { //detaches w/o animation 
    $(this).closest('.element').detach().prependTo('#diff-view').hide().slideDown(250) 
}); 

私はもちろんのアニメーションを維持したいが、私はちょうど場所でそれらを保持したまま外す代わりに削除する方法を見つけ出すことはできません。どんな助けでも大歓迎です。

Answer 1

親をアニメーション化すると、thisはアニメーション要素を指します。閉じるボタンの結果参照が失われます。

ストア現在の要素と標的化する後の使用の要素の参照。

$(document).on("click", ".close-button", function (e) { 
    //Store the reference 
    var $this= $(this); 
    $(this).parent().animate({ 
     opacity: 0 
    }, 250, function() { 
     $(this).animate({ 
      marginBottom: 0 
     }, 250) 
     .children() 
     .animate({ 
      padding: 0 
     }, 250) 
     .wrapInner("<div />") 
     .children() 
     .slideUp(250, function() { 
      $this.closest('.element').prependTo('#diff-view').hide().slideDown(250) 
     }); 
    }); 
});