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

Question

我有一个元素列表，每个元素都有一个关闭按钮。点击时播放动画，列表向上滑动，成功移除item。

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

我试图修改上面的代码，这样我就不会删除该元素，而是分离该元素并将其移动到另一个 View 。我尝试使用以下代码进行此操作，但无济于事。$(this).closest('.element').detach().prependTo('#diff-view').hide().slideDown(250)

摆脱动画可以成功地将元素移动到不同的 View 。

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