나는 npc_parent_i(i는 색인) 형식의 ID가있는 패널 목록 이 있으며 모두 클래스가 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');
});
});
나는 또한 설정 position의를 .npc-container에relative
데모 : http://jsfiddle.net/robschmuecker/958e6/animate 제대로 작동하려면 jQuery UI가 필요합니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다