Анимация на jquery

[bobo]

Всем привет! Много раз меня этот форум выручал, поэтому очень надеюсь на вашу помощь!

На странице требовалось сделать небольшую анимацию: 2 блока уменьшаются в размерах, между ними появляется третий и под ними еще один. В итоге все ок даже в ie7+, но почему то в последней версии хрома (22.0.1229.94 m) все глючит В чем проблема - реально непойму

Посмотрите, может будут у кого мысли - http://mytavatuy.ru/geography/main.html

Код простой:

			//клик на лупе в поле поиска направления
			$(".animate").click(function(e) {
				
                                //уменьшаем размер строки поиска (откуда, куда)
				$(".sizeI").animate({ width:"351px" },300);	
				
				//уменьшаем размер правого и левого блоков
				$(".city").animate({ width:"390px" },300);	
				
				//уменьшаем отступов у блоков
				$(".cityFromP").animate({ paddingRight:"5px", borderBottom:"0" },300);	
				$(".cityToP").animate({ paddingLeft:"5px", borderBottom:"0" },300);
				
				//выводим центральный блок
				setTimeout('$(".sizeB").animate({ width:"136px"	},300)',400);
				
				//самолет
				setTimeout('$(".sizeAir").show(800)',600);	
				
				//текст
				setTimeout('$(".sizeF").show(800)',1000);

				//подробный поиск
				setTimeout('$(".findOptions").show(800)',1400);
				
				//подгружаем скроллбары
				setTimeout('$(".js_scroll").jScrollPane({verticalDragMinHeight:53,verticalDragMaxHeight:53})',1500);
				setTimeout('$(".js_scroll_bottom").jScrollPane({verticalDragMinHeight:75,verticalDragMaxHeight:75})',1500);
				
				return true;

            });

Т.е. по большому счету резал код до вида

                //уменьшаем размер строки поиска (откуда, куда)
				$(".sizeI").animate({ width:"351px" },300);	
				
				//уменьшаем размер правого и левого блоков
				$(".city").animate({ width:"390px" },300);

Глюки на этом этапе - именно в момент уменьшения ширины.


Заранее благодарю!

 

[Redjik]

ну теперь верстку правь...
на вскидку, дело в инлайн блоках...

 

[bobo]

Пробывал с float'ом - нечего не изменилось Засада какая-то.

 

[damner2]

Происходит такое поведение из-за того, что в процессе анимации изменяется ширина родительского контейнера (у него ж указано display:table).
Навскидку 2 решения:
1. Убрать display:table у .cityFind (зачем он там - хз - баловство)
2. Поставить ширину 100% у .cityFind

 

[bobo]

О_о
о_О
Братан, спасибо, даже не знаю, как и благодарить)))

з.ы. display:table используется для того, что б убрать отступы у inline элементов, вычитал тут - http://habrahabr.ru/post/137582/

зз.ы. Еще раз спасибо!

 

[damner2]

У display:table много побочных эффектов. Я предпочитаю решать эту проблему другими способами.
Да и в данном случае я б ваще сделал бы блоки абсолютно позиционированными в relative-контейнере (так как ширина и высота известны). У одного left:0, у второго right:0 - точно ничё никуда не съехало бы =) Ну там анимация немного поменялась бы, но думаю она в ТЗ не жёстко у тебя прописана =)

 

[bobo]

ТЗ вообще нету Сейчас уже смысла нет менять, кроме анимации других замечаний нет