Question

我有一个面板列表，其中包含npc_parent_i形式的ID（其中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');
    });
});

我还将position的{{1}}设置为.npc-container

演示：http://jsfiddle.net/robschmuecker/958e6/还注意到relative需要jQuery UI才能正常工作。

Answer 2

fadeOut将设置不透明度，然后将元素设置为display：none。这将其从布局流程中删除。动画不透明属性是一个更好的选择。

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

2 个答案: