完成动画后分离并移动元素

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