JQuery анимация. Пограничная проблема

Question

У меня такая ситуация: http://jsfiddle.net/pedroR/wF2P5/2/

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

Любые идеи?Что я делаю не так и как мне решить эту проблему ??

Спасибо

Answer 1

Проблема в том, что .animate() добавляет overflow: hidden во время анимации.

Один из способов исправить это без особых переделок - установить .css('overflow','visible') при вызове .animate() дляпример:

$this.stop().animate({'width':'100px'},500).css('overflow', 'visible');

См .: http://jsfiddle.net/wF2P5/4/

Answer 2

Во время вызова animate к элементам добавляется overflow: hidden, что скрывает расширенные границы. После вызова анимации переполнение никогда не сбрасывается.

Вы можете либо вручную вызвать css('overflow', 'auto') после завершения анимации, либо структурировать свой контент другим способом, не требующим относительного позиционирования.