Здесь JsFiddle: http://jsfiddle.net/d6mmZ/7/
Нажатие на ссылки 1 и 2 мгновенно обновляет текст. При нажатии на ссылку 3 начинается медленное затухание. Если я нажму ссылку 1 или 2 в течение этого времени, анимация должна быть прервана, и новый текст будет показан мгновенно.
В Chrome это именно то, что происходит. В Firefox 13/14 есть пауза в полсекунды, во время которой содержимое полностью невидимо. Если я дам полное исчезновение, ссылки 1 и 2 будут работать мгновенно.
Является ли это ошибкой Firefox/jQuery или я неправильно использую fade? Если ошибка, я могу как-то обойти это?
Просто прятаться, заставляя переплавку, а затем показывая ее снова, помогло хотя бы в 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);
}
Это ошибка в 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();
});
Для чего он стоит, попробовал его с бета-версией FF15, и, похоже, он работает нормально, поэтому, если ошибка в FF13/14, скоро будет исправлена.
В качестве обхода можно сделать .fadeTo(0,1) вместо .css('opacity', 1)
Это обходной путь, который я придумал. Работает на Firefox14
Не понимаю, почему вы устанавливаете непрозрачность 1 (или true) в этом случае, просто используйте .show в своем showIt, и он должен исправить это.
function showIt(message) {
$('div').empty().append(message)
.stop()
.show();
}
EDIT: попробуйте здесь: 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...');
});