Как создать анимированные скользящие окна / вкладки меню?

Question

Я создал меню навигации в YUI 2.8, как показано ниже:

У меня также есть анимированные вкладки с использованием CSS-переходов. CSS-переходы не очень широко поддерживаются браузерами, и моя анимация не работает в Opera, IE и т. Д.
Поскольку я уже использую YUI 2.8 на этой странице, может кто-нибудь сказать мне, как мне анимировать эти вкладки?
Когда я нажимаю на любую вкладку, она должна плавно (анимированно) расширяться по вертикали.
Ниже приведены свойства вкладок, которые будут меняться при выборе любой вкладки (ниже должны быть анимированы свойства вкладок):

• 1012 * Прокладки *
• Поля
• цвет фона
• Граница

Обратите внимание на изображение выше:

• Слева от правой стороны остается мало места в случае № 1, когда 1-я вкладка выбран.
• В случае № 2 и № 3 слева и справа остается место.
• В случае № 4 слева остается место, когда последняя вкладка выбран.

Answer 1

YUI имеет замечательную Anim утилиту , которую вы можете использовать и которая является кросс-браузерной.Код для реализации анимации довольно прост с YUI Anim, поскольку он обрабатывает большинство вычислений, необходимых для перехода.Примером в вашем случае будет:

var tab1_open = new YAHOO.util.ColorAnim('tab1', {
  padding : {to: 20},
  marginLeft : {from: 0, to: 30},
  marginTop : {from: 0, to 30},
  backgroundColor : {from: '#999', to: '#cecece'},
  borderColor : {to: '#000'}
}, 0.5);

Затем, чтобы запустить анимацию, просто позвоните:

tab1_open.animate();