Содержимое невидимо на полсекунды при прерывании jQuery.fadeTo только в Firefox

Здесь JsFiddle: http://jsfiddle.net/d6mmZ/7/

Нажатие на ссылки 1 и 2 мгновенно обновляет текст. При нажатии на ссылку 3 начинается медленное затухание. Если я нажму ссылку 1 или 2 в течение этого времени, анимация должна быть прервана, и новый текст будет показан мгновенно.

В Chrome это именно то, что происходит. В Firefox 13/14 есть пауза в полсекунды, во время которой содержимое полностью невидимо. Если я дам полное исчезновение, ссылки 1 и 2 будут работать мгновенно.

Является ли это ошибкой Firefox/jQuery или я неправильно использую fade? Если ошибка, я могу как-то обойти это?

Ответ 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/

Ответ 2

Это ошибка в Firefox (v14).

Однако хорошей новостью является то, что я обнаружил ТРЕХ простые решения, которые вы можете выбрать, что сохранит ваш текущий макет веб-страницы.

Если этого недостаточно, я также привел в таблицу бонус 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 Event Listener вместо того, чтобы использовать весь беспорядок из них, вы можете рассмотреть эту Бонусную версию, которая также использует такой же CSS-исправление ошибок, как указано выше:

Ссылка: jsFiddle Single Click

Решение 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>

Решение Single Click 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();

});

Ответ 3

Для чего он стоит, попробовал его с бета-версией FF15, и, похоже, он работает нормально, поэтому, если ошибка в FF13/14, скоро будет исправлена. В качестве обхода можно сделать .fadeTo(0,1) вместо .css('opacity', 1)

Ответ 4

Это обходной путь, который я придумал. Работает на Firefox14

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

Ответ 5

Не понимаю, почему вы устанавливаете непрозрачность 1 (или true) в этом случае, просто используйте .show в своем showIt, и он должен исправить это.

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

EDIT: попробуйте здесь: http://jsfiddle.net/nqkS8/

Ответ 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/