javascript - 动画后删除和移动元素

Question

我有一个面板列表，其 ID 的形式为 npc_parent_i(其中 i 是它的索引)，所有这些面板都有一个类 npc-container。它们形成一条垂直线，顶部是 npc_parent_1。我想完成这个动画:

当 npc_parent_1 淡出时，第一个下方的所有 npc_parent_i 都移向页面顶部，最终完全重叠 npc_parent_1。动画结束后，我想删除元素 npc_parent_1。

这是我当前的代码:

var panelHeight = $('#npc_parent_1').outerHeight();
$.when(
    $('#npc_parent_1').fadeOut(750),
    $('.npc-container').animate({top:-panelHeight}, 750)
).then(
    function(){
        var npcPanel = document.getElementById('npc_parent_1');
        npcPanel.parentNode.removeChild(npcPanel);
        $('.npc-container').css('top', '0px');
    }
);

动画运行正确，但是当元素被删除时，其余面板向上移动，然后随着它们的最高值设置回 0 而向下移动。我认为问题可能出在 npc_panel_1 也有 npc-container 类，但它在动画期间不会移动。

如何在删除面板上方的元素的同时将面板保持在原位？

Answer 1

我认为 fadeOut 给您带来了麻烦。看看这段代码，

$(document).ready(function () {
    $.when(
    $('#test1').animate({
        opacity: 0
    }, 750),
    $('.npc-container').not('#test1').animate({
        top: '-200px'
    }, 750)).then(

    function () {
        var npcPanel = document.getElementById('test1');
        npcPanel.parentNode.removeChild(npcPanel);
        $('.npc-container').css('top', '0px');
    });
});

我还设置了.npc-container的position为relative

演示:http://jsfiddle.net/robschmuecker/958e6/另请注意，animate 需要 jQuery UI 才能正常工作。