jQuery fadeOut 및 fadeIn 일관되게 일관성이 없음

Question

html 테이블 내부에 업데이트를 수행하는 버튼이 있습니다 (업데이트 기능이 중요하지 않으므로 제거됩니다). 업데이트가 완료되면 부트 스트랩 레이블이 표시되고 숨겨져 업데이트가 완료되었음을 나타냅니다. jQuery의 fadeIn 및 fadeOut을 사용하여 레이블을 표시하거나 숨 깁니다.

레이블을 단추의 위쪽에 맞추고 싶습니다. 나는 올바르게 작동한다고 생각했지만, 업데이트 버튼을 처음 클릭 할 때 레이블이 올바르게 정렬되어 인 것으로 나타났습니다. 이상하게도 처음으로 레이블이 버튼 아래에 나타납니다.

Demonstration Fiddle

내가 왜 이런 일이 어떻게/표시되지 않습니다. 업데이트 된 라벨이 매번 버튼 오른쪽에 나타나지 않는 이유는 무엇입니까?

UPDATE :

흥미롭게도, 덜 예쁜하지만,이 라인을 $("#updatedLabel").fadeOut(300);$("#updatedLabel").css('display', 'none');에 대한 수정 문제를 변경.

Answer 1

"인라인 블록"을 원할 때 JQuery의 fadeIn 기능이 디스플레이를 "블록"으로 변경하기 때문입니다.

<span id="updatedLabel" class="label label-success" style="display:inline-block; opacity: 0;">Updated!</span> 

을 그리고 불투명도 변경 animate를 사용 :

대신으로 당신의 스타일을 변경

//Put this inside an interval 
opacity -= 10; 
if (opacity <= 0) clearInterval(interval); 
$("#updatedLabel").animate({opacity: opacity }); 

을