Jquery оптимизация анимации

[Baracuda]

Все чаще и чаще сталкиваюсь с тем, что в каждом проекте требуется всё больше и больше анимации. Все скрипты всегда пишу сам, не пользуюсь стандартными каруселями или решениями.

По примеру недавнего проекта, задача по скриптам была следующая:
1. В шапке сайта скрытая панель, по клику на определенный элемент выезжает.
2. В шапке находится логотип по наведению на него он уходит частично в fadeOut и появляется другой fadeIn.
3. В шапке находится поиск по клику на него он выезжает влево (расширяется), причем стоящий перед поиском элемент при этом должен уходить в FadeOut.
4. В контент области 5 картинок 1600х768 в бекграунде. Каждые 15 секунд меняется с эффектом fadeIn fadeOut .
5. В контент области есть текст ротатор, с Контроллами влево-вправо, но текст меняется каждый раз после смены фонового изображения.

Вот такой вот список анимаций используется на одной странице. Мне не очень нравится, т.к. бывают торможения анимации, хочется что бы всё работало как часики. Есть ли какие-то методы по оптимизации работы скриптов для улучшения быстродействия? Какие-то специфические приемы верстки? Я где-то читал, что скорость работы скрипта иногда зависит от самой верстки, какие именно критерии влияют на это?

 

[konishoa]

Читай внимательно

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

п.11

When I first started using jQuery I loved the fact that it was easy to use the pre-defined animations like slideDown() and fadeIn() to get some really cool effects incredibly easy. It's easy to take things further though because jQuery's animate() method is very easy to use and very powerful. In fact, is you look at the jQuery source code you'll see that internally those methods are just shortcuts which use the animate() function.

Короче говоря, используй animate() вместо методов fadeIn fadeOut.
Не забывай загружать jquery.min.js - сжатую версию вместо обычной (эт я думаю, ты и так знаешь).

 

[Baracuda]

Спасибо, но проблема не решилась. Причем использую кеширование по полной, минимизоровано всё что можно. У меня есть вопрос по теме.

У меня примерно такая структура для фоновых больших картинок:

<div id="sliderBg">
     <img src="" alt="" />
     <img src="" alt="" />
     <img src="" alt="" />
</div>

Размер картинки 1600х768, спозиционирован и блок и картинки абсолютно, скрипт переключает в заданный интервал времени картинку с эффектом fade. Вопрос заключается в следующем. Скрипту не тяжко работать с большими изображениями? Просто я пробовал изменить структуру. Скриптом выдерал адреса изображений, удалял их и вставлял вместо них блоки <div> с заданными бекгранудами согласно вырванному адресу изображения, работало лучше, но решение не ахти. А без выдерания адреса - не вариант, т.к заказчик врятли захочет каждый раз лезть в css и прописывать беграунд