14

JsFiddle は次のとおりです: http://jsfiddle.net/d6mmZ/7/

リンク 1 と 2 をクリックすると、テキストが即座に更新されます。リンク 3 をクリックすると、ゆっくりとしたフェードアウトが始まります。この間にリンク 1 または 2 をクリックすると、アニメーションが中止され、新しいテキストが即座に表示されるはずです。

Chrome では、まさにそれが起こります。Firefox 13/14 では、コンテンツが完全に見えなくなる 0.5 秒の一時停止があります。フェードを完了すると、リンク 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 テスト済み) のバグです。

ただし、良いニュースは、現在の Web ページ レイアウトを維持する、選択できる 3 つの簡単な解決策を発見したことです。

.click()それだけでは不十分な場合は、単一の機能の代替マークアップを備えたボーナスの jsFiddle も用意しました。


参考: jsFiddle1

ソリューション 1 HTML:

<div id="status">Initial</div>

ソリューション 1 CSS:

#status{
  display: table;
}

参考: jsFiddle2

ソリューション 2 HTML:

<div id="status">Initial</div> <br />

ソリューション 2 CSS:

#status{
  display: inline-block;
}

参考: jsFiddle3

ソリューション 3 HTML:

<div id="status">Initial</div>

ソリューション 3 CSS:

#status{
  font-size: 28px;
}

また、 jQuery クリック イベント リスナーをすべて使用する代わりに、 1 つの jQuery クリック イベント リスナーのみを使用する場合は、上記と同じバグ修正 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ベータ版で試してみたところ問題なく動いているようですので、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
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 に答える
-2

この場合、不透明度を 1 (または true) に設定する理由がよくわかりません。使用するだけ.showshowIt修正できます。

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

編集: ここで試してみてください: http://jsfiddle.net/nqkS8/

于 2012-07-30T09:05:05.857 に答える