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 });