Question

I have created navigation menu in YUI 2.8 as below :

I have also animated tabs using CSS transitions. CSS transitions are not widely supported by browsers and my animations are not working in Opera, IE etc.
Since i’m already using YUI 2.8 on that page, can somebody tell me how do i animate those tabs?
When i click on any tab, it should expand in vertical dimension smoothly (animated).
Below are the properties of tabs which are going to change when i select any tab (Below properties of tabs should be animated) :

• Paddings
• Margins
• Background-Color
• Borders

Please note in above image :

• There is little space left on right side in case #1 when 1st tab is
  selected.
• In case #2 and case #3 there is space left on left as well as right side.
• In case #4, there is some space left on left side when last tab is
  selected.

Answer 1

YUI has a nice Anim utility that you can use and is cross browser. The code to implement animations is quite simple with YUI Anim since it handles most calculations you need for the transition. An example in your case would be:

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);

Then to start the animation simply call:

tab1_open.animate();