Animate свойств ScrollTop&ScrollLeft дергается
Страничка представляет собой большой фон (4000 на 2000), поверх которого абсолютно позиционированы картинки, навигация - "полет" над фоном к нужному месту через собственно Animate. Пробовал ScrollTo, LocalScroll, UI.Easing и т.п. распространенные вещи (суть одна и та же, все использую Animete, просто easing считается по другой формуле), даже изменял стандартный хардкодно зашитый в jquery тик с 13 мс на другие значение - все равно анимация оооочень не плавная. Не подскажите, в чем может быть дело?
Страничка: _http://vintage.skulditsky.kz |
По мне animate() по умолчанию все делает плавно.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <style type="text/css"> div{ background: red; position: absolute; left: 26%; width: 50px; height: 50px; } </style> <script type="text/javascript"> $(function(){ (function cub(){ $('div').show('slow').animate({left:'+=350', opacity: 0.05},1500).animate({left:'-=350', opacity: 1},1500, cub); })(); }); </script> <div></div> |
Да, конечно "обычно" animate делает все плавно, причем очень плавно 1000/13=77 fps, но в моем случае в адекватных браузерах все более-менее, но ИЕ - просто убивает дерганностью. На хабрахабре единственный совет был почитать вот этот топик Неплавная анимация скрытых элементов, но у меня нет скрытых элементов и паддинги/марджины у всего по нулям.
|
Уменьшите количество элементов на странице, примерно вдвое-втрое, закомментируйте большие по размеру картинки и фоны. После этого попробуйте снова - станет ли лучше.
|
Цитата:
Также я попробовал в качестве картинки фона поставить не большое изображение, а замостить все каким-нибудь маленьким, т.е. страничка 4000 на 2000, фон - небольшое повторяющееся изображение, при "перелетах" все равно оччень сильно дергается. |
в jQuery я такое наблюдал если в активный элемент параллельно передаются какие-то данные, разберите все по строчкам и оставьте только нужное, а еще лучше и нужное перепишите
|
Цитата:
Большой div с фоном 4000х2000, размером 4000х2000, z-index=1. Пять абсолютно позиционированных картинок в разных местах странички, z-index=2, к ним должен осуществляться плавный переход. И всё, больше никаких наворотов. Насчет переписывания - уже ответил выше, убирал вообще все кроме непосредственно картинки. Т.е. body и один img оставались. |
4000х2000 - это гигантские размеры, если с изображениями меньшего размера все работает как надо, то попробуйте порезать на куски, а если еще и найдутся повторяющиеся элементы, то вообще будет просто собрать, только спрайтами выставляйте фон
|
Цитата:
|
Часовой пояс GMT +3, время: 00:17. |