完成動畫後分離並移動元素

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) 
     }); 
    }); 
});