14

这是 JsFiddle：http: //jsfiddle.net/d6mmZ/7/

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

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

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

4

6 回答 6

5

至少在 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/

于 2012-07-29T20:42:55.977 回答
4

这肯定是一个 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 事件监听器而不是使用一大堆，你可以考虑这个奖励版本，它也使用与上面相同的错误修复 CSS：

参考： jsFiddle 单击

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

});
于 2012-08-02T09:43:47.010 回答
0

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

于 2012-07-26T17:12:07.020 回答
0

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

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

于 2012-07-27T07:58:00.467 回答
-2

在这种情况下，真的不明白为什么您将不透明度设置为 1（或 true），只需.show在您的中使用showIt它就可以修复它。

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

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

于 2012-07-30T09:05:05.857 回答
-2 
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/

于 2012-08-02T13:33:00.430 回答