Question

单击链接1和2会立即更新文本。单击链接3开始缓慢淡出。如果我在此期间单击链接1或2，则应该中止动画并立即显示新文本。

在Chrome中，这正是发生的事情。在Firefox 13/14中，暂停半秒，在此期间内容完全不可见。如果我让淡入淡出完成，链接1和2会立即生效。

这是一个Firefox / jQuery错误还是我误用了淡入淡出？如果有错误，我可以以某种方式解决这个问题吗？

Answer 1

简单地隐藏，强制重排然后再次显示它对我来说至少在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);
}

http://jsfiddle.net/d6mmZ/28/

Answer 2

这肯定是Firefox（ v14测试的）错误。

然而，好消息是我发现了您可以选择的 THREE 简易解决方案，这将保留您当前的网页布局。

如果这还不够，我还带来了奖励jsFiddle以及单.click()功能的备用标记。

参考： 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 Version < / strong>也使用与上面相同的错误修复CSS：

参考： jsFiddle Single Click

解决方案单击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(); });

Answer 3

对于它的价值，尝试使用FF15 beta并且它似乎工作正常，所以如果这是FF13 / 14中的错误，很快就会修复。作为解决方法，可以.fadeTo(0,1)代替.css('opacity', 1)

Answer 4

这是我提出的解决方法。适用于Firefox14

http://jsfiddle.net/d6mmZ/27/

Answer 5

在这种情况下，不要真正理解为什么将不透明度设置为1（或者为真），只需在.show中使用showIt即可修复它。

function showIt(message) {
    $('div').empty().append(message)
        .stop()
        .show();
}

编辑：在这里试试：http://jsfiddle.net/nqkS8/

Answer 6

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

http://jsfiddle.net/d6mmZ/57/

在仅在Firefox中中止jQuery.fadeTo时，内容不可见半秒

6 个答案: