2012-03-21 2 views
2

jQuery를 사용하여 내가 만든 "알림"버블을 페이드 아웃합니다. 처음 함수가 호출되면 처음에는 잘 사라지지 만 두 번째에는 "알림"이 본문에 추가되지만 그곳에 그냥 앉아서 페이드 아웃하지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다.jQuery fadeOut() 한 번만 작동

여기에 호출되는 자바 스크립트가 있습니다.

if (pointsCalculated = 1) { 
    $('body').append('<div id="progress">' + pointsCalculated + ' point added to current points...</div>'); 
} 
else { 
    $('body').append('<div id="progress">' + pointsCalculated + ' points added to current points...</div>'); 
} 

//Reset calculator after adding to tracker 
calcReset(); 

    $("#progress").fadeOut(2000); 
+0

동일한 ID를 가진 두 번째 div를 추가하고 div가 있는지 확인하고 fadIn()을 사용하거나 그렇지 않으면 가시성을 변경하고 해당 내용을 편집하십시오. – CBusBus

+0

왜 'if'' else' 문 안에서 두 개의 동일한 연산을 수행하고 있습니까? –

+1

@ RokoC.Buljan 하나가 말하고 다른 하나는 – voigtan

답변

4

페이드 아웃 후 요소를 제거하십시오 :

$("#progress").fadeOut(2000, function() { $(this).remove(); }); 

상세 정보 :

.remove()
.fadeOut()

당신이있어 그래서
+0

입니다. 이것은 완벽하게 작동합니다. - 감사합니다. 내가 그 짐을 지우지 않았다고 믿을 수가 없네. 오. – mattdonders

0

fadeOut 이벤트를 추가 할 때마다 #progress 요소에 리 바인드해야합니다.

0

요소를 DOM에 다시 추가 할 때 추가 된 요소 인 fadeOut 바인딩을 다시 만들어야합니다. 추가 한 직후에이 바인딩을 만들 수 있습니다. 이제이 기능이 작동합니다.

0

당신 코드, 당신은 "진보"를 제거하기 표시되지 않습니다 가능성이 매번 새로운 것을 추가 할 것입니다. ID는 매우 고유하므로 코드는 두 개를 찾아 실패합니다.

2

자바 스크립트는 ID가있는 요소를 두 개 이상 찾을 수 없으며 다시 실행할 때 이미 흐리게 표시됩니다.

당신이 클래스에 ID를 변경 한 다음 표시되고 해당 항목에 fadout를 시작하는 애니메이션, 그것의 완료되면 당신은 당신이 많은 .progress

에 해달라고 그래서 그것을 제거 할 수 있습니다 모든 .progress을 찾을 수 있습니다

$('body').append('<div class="progress">' + pointsCalculated + ' ' + (pointsCalculated === 1 ? 'point' : 'points') + ' added to current points...</div>'); 

//Reset calculator after adding to tracker 
calcReset(); 

$(".progress:visible:not(:animated)").fadeOut(2000, function() { $(this).remove(); }); 

자바 스크립트에서 변수가 최소한 두 개 이상의 "="값을 사용해야하는 값인지 확인하려면 해당 값을 설정해야합니다.