2014-09-05 4 views
0

이전에 본문에 추가 한 알림 패널을 닫으려고합니다..animate() 및 .remove()가 잘 작동하지 않음

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'}); 

이 자체로는 잘 작동하지만 내 목표는 내가 애니메이션이 완료된 후 제거하는 .remove() 문을 추가하도록 DIV 객체를 이동하는 것입니다.

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'}); 
$('#notify-panel').remove(); 

이 도구를 실행하면 패널이 본체에서 제거되었지만 애니메이션이 실행되지 않고 레이어가 사라집니다. 그래서 콜백의 일부로 .remove()를 추가했습니다.

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'}, {callback: function(){ $(this).remove(); }}); 

이것은 애니메이션이 적용되지 않은 이전 단계와 동일합니다. 그래서 내 질문에, 만약 div 레이어에 애니메이션을 적용하고 싶다면 그것을 어떻게 제거 할까? 분명히, 나는 잘못된 것을하고있다.

+0

예제를 모든 물건을 시연 좋은 일 ... 그것은 당신이 무엇을 할 그 예는 수 없습니다 그 풀다? – ControlAltDel

답변

3

이것은 reading the manual에 의해 해결 될 수 있었다. 이 중 하나를 사용

$('#notify-panel').animate({ 
    top: -250 
}, { 
    duration: 1000, 
    easing: 'easeInOutBack', 
    complete: function() { 
     $(this).remove(); 
    } 
}); 

또는 : JQuery와 - UI 페이지에

$('#notify-panel').animate({ 
    top: -250 
}, { 
    duration: 1000, 
    easing: 'easeInOutBack' 
}, function() { 
    $(this).remove(); 
}); 
1

하나는 값과 픽셀 주위에 따옴표가 누락 된 것입니다.

나는이처럼 작성합니다

$('#notify-panel').animate({ 
    top: '-250px' 
}, { 
    easing: 'easeInOutBack' 
}, 1000, function() { 
    $(this).remove(); 
}); 
+0

'px'는 필요 없습니다. –

+0

'.animate()'를 작성하는 두 가지 방법을 혼용하고 있습니다. 제대로 작동할까요? –

관련 문제