Неплавная анимация в jquery ui - моя ошибка или так и должно быть?

[Zverushka]

Не плавная анимация в jquery ui  - моя ошибка или так и должно быть?

Я использовала jquery UI custom билд со всеми эффектами - взяла банальный эффект, просто его подключила.

Посмотреть на эффект можно нажав кнопку "показать все товары".

Как видите как-то рывочками все). Я ничего не могу сделать в пределах jquery, чтобы стало плавнее? По идее эффекты jquery ui должны быть плавными априори.

zverushka.zz.mu/samovar/

[nerv]

$cur_subcat = $(this).parent().parent().parent().parent().find(".sub-catalog");

молодец, добралась 

 

вот она "мощь" жуквери

 

 

причин может быть много: 

1. анимация на js

2. двигаешь большие блоки, а они тяжелые 

3. параллельно инициализируешь слайдеры опять-таки с анимацией на js

4. может еще что-нибудь

 

анимируй на css и будет тебе счастье

[Zverushka]

молодец, добралась    вот она "мощь" жуквери

Это плохо? есть другие варианты?)

 

Да, контент огромный и слоев много получается 

 

 

 

параллельно инициализируешь слайдеры опять-таки с анимацией на js

А есть другие варианты с инициализацией? (там просто к каждому слайдеру нужно привязать pager из самих картинок - для этого нужно знать из какого блока происходит вызов - а то bxslider все pager в один тег закинет)

Edited November 19, 2013 by Zverushka

[Catherine]

есть другие варианты?

closest()? 

 

Основные различия closest parent и parents доступно описаны тут и тут.

[Zverushka]

@Catherine, о спасибо! Эта команда как-то прошла мимо меня в обучении!

[mishka]

$cur_subcat = $(this).parent().parent().parent().parent().find(".sub-catalog");

молодец, добралась

вот она "мощь" жуквери

собственно жуквери тут не при чем абсолютно. Тут человек показывал как он на чистом делал поезд из parentNode

По сабжу -- делай анимацию на css.

Так же есть готовые плагины: http://ricostacruz.com/jquery.transit/, http://www.minimit.com/projects/code/minimit-update-plugin

[Zverushka]

Скажите а есть аналог closest для children?

[mishka]

children(selector) -найдет дочерние элементы по селектору.

find(selector) - найдёт все элементы внутри, по селектору.

Или надо как-то иначе?

closest находит ближайший родительский элемент. Если надо первый внутренний то можно так:

find(...).eq(0) или find(...).first()

P.S. форматировать не могу, так как с планшета пишу.

[Zverushka]

Попыталась сделать css анимацию на transition - использовала только значение left - чтобы проверить, скрипты анимации отключила - также тормозит)... Видимо дело в количестве данных и скриптов...

children(selector) -найдет дочерние элементы по селектору.
find(selector) - найдёт все элементы внутри, по селектору.
Или надо как-то иначе?
closest находит ближайший родительский элемент. Если надо первый внутренний то можно так:
find(...).eq(0) или find(...).first()

P.S. форматировать не могу, так как с планшета пишу.

Имеются в виду первый ближайший children - по аналогу closesеst, но не для родителя, а для ребенка.

[Z1gnet]

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

[Zverushka]

В общем я убрала scrollTop - стало получше и еще чуть лучше стало, когда я заснула addclass после анимации. Вроде как УИ создает еще и анимацию на добавить класс. 

Ну и заменила перенты на клосесты.

Обновила сайт.

Хотя в вебките будто также тормозит.

Edited November 19, 2013 by Zverushka

[Z1gnet]

Имеются в виду первый ближайший children - по аналогу closesеst, но не для родителя, а для ребенка.

я так понимаю что вам подойдет .find('.target-class') это он найдет все элементы с .target-class внутри блока от которого происходит поиск.

Я только немного не понял зачем тут УИ? тут все ручками можно написать на джейквери и получиться довольно таки короткий код. (я про то что ты блок выезжал слева направо). хотя может чего не заметил...

[Zverushka]

 

Имеются в виду первый ближайший children - по аналогу closesеst, но не для родителя, а для ребенка.

я так понимаю что вам подойдет .find('.target-class') это он найдет все элементы с .target-class внутри блока от которого происходит поиск.

Я только немного не понял зачем тут УИ? тут все ручками можно написать на джейквери и получиться довольно таки короткий код. (я про то что ты блок выезжал слева направо). хотя может чего не заметил...

 

УИ предоставлет более плавную анимацию, чем базовый jquery - поэтому поставила для плавности)....

[Z1gnet]

УИ предоставлет более плавную анимацию, чем базовый jquery - поэтому поставила для плавности)....

как я вижу не сильно помогло

[Z1gnet]

http://cssdeck.com/labs/5rkoolcd вот я набросал, вполне плавно, хотя возможно у вас на сайте не так все будет плавно...

[Vin]

http://www.artlebedev.ru/tools/technogrette/html/browser-performance/

http://chikuyonok.ru/2010/11/optimization-story/

 

Не самые новые статьи, но хорошо объясняют, как вёрстка динамических и смежных с ними элементов влияют на производительность.

 

Ещё добавлю, что box-shadow довольно "тяжёлое" свойство для анимируемых элементов. Попробовал без тени запустить: по-моему, явно быстрее работает, но не идеально, без border-radius работает ещё быстрее.

 

Для работы с CSS-анимациями есть и jQuery-плагины: http://habrahabr.ru/post/140630/

 

 

http://cssdeck.com/labs/5rkoolcd вот я набросал, вполне плавно, хотя возможно у вас на сайте не так все будет плавно...

 

Там основная проблема именно перерисовке всего и вся: массивный блок с большим количеством элементов, картинками, CSS3-приблудами.

Edited November 20, 2013 by Vin