文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript -动画后删除和移位元素

问javascript -动画后删除和移位元素
EN

Stack Overflow用户

提问于 2014-08-05 22:32:22

回答 2查看 977关注 0票数 0

我在表单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，但它在动画期间不会移动。

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

jquery

css

animation

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-08-05 23:20:18

我认为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 of .npc-container设置为relative

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

票数 2

Stack Overflow用户

发布于 2014-08-05 23:28:09

fadeOut将设置不透明度，然后将元素设置为显示: none。将其从布局流中移除。动画的不透明度属性是一个更好的选择。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25149415

复制

相似问题

问javascript -动画后删除和移位元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript -动画后删除和移位元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript -动画后删除和移位元素
EN