Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Animate свойств ScrollTop&ScrollLeft дергается (https://javascript.ru/forum/jquery/12129-animate-svojjstv-scrolltop-scrollleft-dergaetsya.html)

skulditsky 01.10.2010 22:50

Animate свойств ScrollTop&ScrollLeft дергается
 
Страничка представляет собой большой фон (4000 на 2000), поверх которого абсолютно позиционированы картинки, навигация - "полет" над фоном к нужному месту через собственно Animate. Пробовал ScrollTo, LocalScroll, UI.Easing и т.п. распространенные вещи (суть одна и та же, все использую Animete, просто easing считается по другой формуле), даже изменял стандартный хардкодно зашитый в jquery тик с 13 мс на другие значение - все равно анимация оооочень не плавная. Не подскажите, в чем может быть дело?
Страничка: _http://vintage.skulditsky.kz

monolithed 01.10.2010 23:42

По мне 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>

skulditsky 02.10.2010 06:23

Да, конечно "обычно" animate делает все плавно, причем очень плавно 1000/13=77 fps, но в моем случае в адекватных браузерах все более-менее, но ИЕ - просто убивает дерганностью. На хабрахабре единственный совет был почитать вот этот топик Неплавная анимация скрытых элементов, но у меня нет скрытых элементов и паддинги/марджины у всего по нулям.

subzey 02.10.2010 10:15

Уменьшите количество элементов на странице, примерно вдвое-втрое, закомментируйте большие по размеру картинки и фоны. После этого попробуйте снова - станет ли лучше.

skulditsky 02.10.2010 10:19

Цитата:

Сообщение от subzey (Сообщение 72778)
Уменьшите количество элементов на странице, примерно вдвое-втрое, закомментируйте большие по размеру картинки и фоны. После этого попробуйте снова - станет ли лучше.

Попробовал убрать вообще всё :cray: Оставил только фон, даже без кнопок, задал delay-ми переходы - все равно в ИЕ дергается. Я думал, что проблема в каких-то элементах - но как выяснилось нет.
Также я попробовал в качестве картинки фона поставить не большое изображение, а замостить все каким-нибудь маленьким, т.е. страничка 4000 на 2000, фон - небольшое повторяющееся изображение, при "перелетах" все равно оччень сильно дергается.

monolithed 02.10.2010 10:42

в jQuery я такое наблюдал если в активный элемент параллельно передаются какие-то данные, разберите все по строчкам и оставьте только нужное, а еще лучше и нужное перепишите

skulditsky 02.10.2010 10:45

Цитата:

Сообщение от monolithed (Сообщение 72783)
в jQuery я такое наблюдал если в активный элемент параллельно передаются какие-то данные, разберите все по строчкам и оставьте только нужное, а еще лучше и нужное перепишите

да, о том, что лучше не менять никаких свойств во время анимации я знаю. Данные никакие не передаются. Итак, что есть на странице:
Большой div с фоном 4000х2000, размером 4000х2000, z-index=1.
Пять абсолютно позиционированных картинок в разных местах странички, z-index=2, к ним должен осуществляться плавный переход. И всё, больше никаких наворотов. Насчет переписывания - уже ответил выше, убирал вообще все кроме непосредственно картинки. Т.е. body и один img оставались.

monolithed 02.10.2010 11:01

4000х2000 - это гигантские размеры, если с изображениями меньшего размера все работает как надо, то попробуйте порезать на куски, а если еще и найдутся повторяющиеся элементы, то вообще будет просто собрать, только спрайтами выставляйте фон

skulditsky 02.10.2010 14:16

Цитата:

Сообщение от monolithed (Сообщение 72787)
4000х2000 - это гигантские размеры, если с изображениями меньшего размера все работает как надо, то попробуйте порезать на куски, а если еще и найдутся повторяющиеся элементы, то вообще будет просто собрать, только спрайтами выставляйте фон

Я уже пробовал (выше я писал, что вместо большой картинки пробовал ставить маленькие и очень маленькие) - эффект тот же. Тут затык именно в размере страницы, даже вообще без фонового элемента или каких либо изображений движения прерывистые, а эффект "полета" над фоном это основное что заказчик хочет видеть. Может кто в других фреймворках делал нечто подобное? Может в них не тормозит?


Часовой пояс GMT +3, время: 12:54.