这是 JsFiddle：http://jsfiddle.net/d6mmZ/7/
单击链接 1 和 2 会立即更新文本。单击链接 3 开始缓慢淡出。如果我在此期间单击链接 1 或 2，动画应该会中止并立即显示新文本。
在 Chrome 中，这正是发生的事情。在 Firefox 13/14 中，有半秒的暂停，在此期间内容完全不可见。如果我让淡入淡出完成，链接 1 和 2 会立即生效。
这是 Firefox/jQuery 错误还是我误用了淡入淡出？如果是错误，我可以以某种方式解决这个问题吗？
【问题讨论】：
标签： jquery jquery-ui animation
至少在 Firefox 13 中，只需隐藏、强制回流然后再次显示它就可以解决问题：
function showIt(message) {
var div = $("div");
div.empty().append(message).stop().hide();
div[0].offsetWidth; //Force reflow, required
div.show().css('opacity', 1);
}
【讨论】：
50 时会显示什么？我也很好奇您为什么最终找到了具有潜在副作用的解决方法，或者您是否设法以某种方式中和它们？
这肯定是 Firefox（v14 测试）的错误。
不过，好消息是我发现了三种可供您选择的简单解决方案，它们将保留您当前的网页布局。
如果这还不够，我还为单个 .click() 功能提供了带有备用标记的奖励 jsFiddle。
参考：jsFiddle 1
解决方案 1 HTML：
<div id="status">Initial</div>
解决方案 1 CSS：
#status{
display: table;
}
参考：jsFiddle 2
解决方案 2 HTML：
<div id="status">Initial</div> <br />
解决方案 2 CSS：
#status{
display: inline-block;
}
参考：jsFiddle 3
解决方案 3 HTML：
<div id="status">Initial</div>
解决方案 3 CSS：
#status{
font-size: 28px;
}
如果你只想使用 1 个 jQuery Click 事件监听器 而不是使用一大堆的，你可以考虑这个 Bonus 版本 也使用与上述相同的错误修复 CSS：
解决方案单击 HTML：
<div id="status">Initial</div>
<div id="links">
<a id="a1" href="#">Link 1</a>
<a id="a2" href="#">Link 2</a>
<a id="a3" href="#">Link 3</a>
</div>
解决方案单击jQuery：
function showIt(message, opacity, duration) {
$('#status').stop().html(message).animate({opacity: opacity}, duration, 'easeInExpo');
}
jQuery('#links a').click(function(event) {
switch (this.id) {
case 'a1':
showIt('Foo!', 1, 0);
break;
case 'a2':
showIt('Bar!', 1, 0);
break;
case 'a3':
showIt('Quux...', 0, 3000);
break;
}
event.preventDefault();
});
【讨论】：
display: table。
对于它的价值，在 FF15 测试版中尝试过，它似乎工作正常，所以如果这是 FF13/14 中的错误，很快就会修复。
作为一种解决方法，可以使用.fadeTo(0,1) 而不是.css('opacity', 1)
【讨论】：
这是我想出的解决方法。适用于 Firefox14
【讨论】：
真的不明白为什么在这种情况下您将不透明度设置为 1（或 true），只需在您的 showIt 中使用 .show 即可解决它。
function showIt(message) {
$('div').empty().append(message)
.stop()
.show();
}
编辑：在这里尝试一下：http://jsfiddle.net/nqkS8/
【讨论】：
function showIt(message) {
//the old code here didnt update 'display' (i use show() for this), and treated the text as a node.
$('div').text(message)
.stop()
.show()
.css('opacity', '1');
}
然后将fadeTo()更改为fadeOut()，并在动画完成后运行回调：
$('div').fadeOut(1000, function(){
//this function isnt run until fadeOut is finished
showIt('Quux...');
});
【讨论】：