несколько одновременных анимаций

[cyklop77]

помогите пожалуйста разобраться в вопросе

на страничке в .nav_top реализовал меню как на apple.com . проблема в том, что при клике по полю поиска анимация блока .search_form отстаёт по скорости от анимации блока .nav_top ul

я понимаю процесс так. анимация происходит в changeWidth(). при каждом проходе цикла:

1. уменьшается на 1px ширина каждого пункта меню(выстраивается очередь 10ms * 8 = 80ms)

2. увеличивается на 8px ширина блока поиска(добавляется в очередь еще несколько ms)

3. очередь в данный момент свободна, начинается следующий проход цикла(п. 1)

[amelice]

а скрипт сами написали?

все очень сложно на мой взгляд, цикл внутри цикла с анимацией (earch внутри for ) - плохо для анимации, а почему не попробовать как у apple сделано? там только одна анимация делается с шириной контейнера формы, а пункты реализованы table-cell, при анимации все само движется, не нужно ширину пунктов анимировать.

[cyklop77]

скрипт сам писал. понимаю, что здесь уместнее процедурный стиль, но у меня задача потренироваться в написании подобных компонент

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

Edited April 10, 2013 by cyklop77

[npofopr]

а css3 почему не подходит?

[cyklop77]

  On 4/10/2013 at 4:17 PM, npofopr said:

а css3 почему не подходит?

если расскажешь как, то подойдёт. но мне здесь важнее решить типовую задачу именно на js/jq

Edited April 10, 2013 by cyklop77

[npofopr]

http://ruseller.com/lessons.php?rub=2&id=1149

http://forum.htmlbook.ru/index.php?showtopic=35628

Ну и поиск тоже не сложно сделать, чтобы так выезжал. Не знаю правда будет ли он остальной контент сдвигать.

[cyklop77]

ну я вообще то и спрашивал про поиск, который выезжает и сдвигает остальной контент

[npofopr]

Ну вот примерный поиск http://cssdeck.com/labs/super-cool-search-input-using-css3-and-js

http://codepen.io/joshnh/pen/eIksb

http://codepen.io/arthurra/pen/KhCyk

правда он поверх ляжет скорее всего.

Можно на том же сайте поиском посмотреть, где то точно видел.

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