我有一个面板列表,其 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
类,但它在动画期间不会移动。
如何在删除面板上方的元素的同时将面板保持在原位?
最佳答案
我认为 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 才能正常工作。
关于javascript - 动画后删除和移动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25149415/