jQuery облегчает анимацию прокрутки окна в Firefox (ошибка или моя ошибка?)
ПРИМЕР
Прежде всего, вот мой код и проблема:
http://www.nathanstpierre.com/MBX/showoff.html
ПРОБЛЕМА
Так что я вижу, когда вы нажимаете кнопки слева, окно прокручивается до соответствующего заголовка. В любом браузере, кроме Firefox (в том числе... IE задыхается), это очень гладко. Однако если вы уменьшите высоту окна, оно станет плавным на всех компьютерах. Я уже пробовал это на нескольких компьютерах и в IE 7-8, Google Chrome, Safari и Firefox 3.5. Я убрал все биты графики и цвета на странице, так что это не проблема. Я избавился от боковой панели, которая следует за вами, это не так.
ТЕОРИЯ
Я думаю, что плагин JQuery замедления вычисляет расстояние, которое вам нужно пройти, а затем делит количество пикселей, которое нужно переместить на указанную единицу длительности (скажем, 300 пикселей за 30 миллисекунд, поэтому 10 пикселей / мс). Кажется, что любой другой браузер может сделать этот плавный переход, но, возможно, гранулярность, обеспечиваемая событием прокрутки окна, недостаточно сжата, чтобы Firefox мог сделать это гладким? Или, возможно, я использую неправильный плагин замедления или неправильные настройки.
КОД
$("#sidenav a").click(function () {
$("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
$(this).animate({"color":"#fff"},{"duration":400});
clicktarget=$(this).attr("href");
$("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
return false;
});
ЛОГИКА
Добавьте прослушиватель событий для каждого тега в sidenav onClick. Это позволит получить смещение (). Top элемента в документе с тем же идентификатором, что и атрибут href этой ссылки, а затем анимировать из текущего scrollTop в offset(). Top этого элемента. Логика логична и работает плавно в любом браузере, КРОМЕ Firefox... насколько я могу судить.
ПЛЕА
Что я делаю неправильно? Это ошибка?
Спасибо!
ОБНОВЛЕНИЕ
Ну, я не могу с чистой совестью выбрать ни один из ответов, представленных здесь, поскольку ни один из них на самом деле не дал решения этой проблемы, поэтому, если вы следуете этому, выберите своего любимого, и награда перейдет к ответу с самым высоким голосов.
Похоже, проблема заключается в том, что Firefox a) отображает прозрачность и b) обрабатывает события прокрутки. Потенциально, при достаточной мощности процессора, это не проблема, но меня огорчает то, что IE (из всех браузеров) способен воспроизводить это нормально на слабом оборудовании. Я подойду к Mozilla и выясню, есть ли у них что-нибудь сказать по этому поводу.
Для дополнительного назидания бесплатно предоставляются следующие материалы:
С прозрачностью
Без прозрачности
РЕДАКТИРОВАТЬ: Таким образом, вопрос был дан ответ, но сейчас я не могу выбрать его. Кто-нибудь знает, что с этим?
ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ Прошло достаточно времени, чтобы они вернули мне награду, поэтому я выбрал правильный ответ. Похоже, box-shadow и несколько других эффектов вызывают некоторые проблемы с прокруткой в Firefox из-за способа их рендеринга. FF 4.0 + справляется с этим лучше, но у некоторых компьютеров все еще есть проблемы. Это отличная возможность для людей, реализующих CSS3: протестируйте взаимодействие во всех браузерах и посмотрите, оправданы ли затраты на производительность.
5 ответов
Низкая производительность, кажется, вызвана -moz-box-shadow Если вы удалите любые объявления этого свойства (или отключите их с помощью Firebug), анимация прокрутки будет намного более плавной.
Пожалуйста, попробуйте jQuery 1.4. Это кажется намного быстрее, чем jQuery 1.3.2.
Если вам нужно отладить подобные вещи, поместите несжатые js-файлы в ваш код и используйте Firebug с его профилем для профилирования функций.
Ваша страница немного тяжелая с двумя фонами (один прозрачный.png ..)
Проблема в том, что Firefox и / или ваш компьютер обрабатывают анимацию. Проверьте параметр плавной прокрутки в Firefox (Инструменты -> Параметры -> Дополнительно -> Общие -> Использовать плавную прокрутку). Это может быть причиной, если это отмечено...
Всякий раз, когда я пытался подобный эффект, я использовал ScrollTo. возможно это поможет
У меня была такая же проблема с FF 3.5 - определенно выглядит как проблема рендеринга. Если вы попробуете новую версию 3.6, вероятно, все будет в порядке.
У меня были проблемы с ползунком Coda доэрти 2.0, кстати.
С уважением
Andrej