Как сверстать блок с табами с эффектом слайдинга

[parnas]

Есть блок с описаниями товаров. Информация разделана на три составлющие как и в tabbed interface. Только при переключении между табами должно произойти плавно с эффектом горизонтального слайдинга. Даже затрудняюсь делать разметку. Помогите пожалуйста с разметкой и скрипта. Спасибо.

[Switch74]

http://jsfiddle.net/63xfu/

Цвета, размеры и отступы подберете сами

[parnas]

Спасибо огромное. Хотель узнать как можно делать так чтобы слайдер был на ширину названию таба. Тоесть чтобы учитывал и margin и. Как можно отрегуливать длину слайдера под длиной таба? Спасибо заранее.

[Switch74]

посчитать все нужно, если делаете с отступами, то нужно будет учитывать и их в скрипте.

Если вы про тот слайдер, что под табами ездит указывая на активный, а вообще чтобы сильно не гемороиться, можно использовать обертки, которые будут иметь тот-же размер что и сейчас (для скрипта), а для отображения - внутри делаем блоки с нужными отступами 

[parnas]

Спасибо. Попробую!

[parnas]

Друзья, уважаемый Switch74, сделал табы. Но к сожеления пока все стандартно. Скрипт Switch74 не смог подгонять  . Сделал загатовку. Помогите допилить скрипт чтобы при переключениях border-bottom плавно перемешался. Спасибо.

[Switch74]

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

[parnas]

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

Знании по JS по пока совсем мало. Если не работы не много и есть возможность, пожалуйста, помогите.

[Switch74]

так что вам мешает использовать мой скрипт? стрелочку вы умеете делать, добавьте ее к моему бегунку, если нужно изменить отступы/размеры - это вроде не проблема, если делать все через обертки