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