Question

I have this situation: http://jsfiddle.net/pedroR/wF2P5/2/

When the mouse is hover each columns its animate with a change of width. That’s ok. The problem is that the border-left that initially are bigger, it becomes in the same height as the columns. But I don’t want that, I want that the border stays in the same size. I already tried with images but with no success.

Any Ideas?? What I’m doing wrong and how should I solve this problem??

Thanks

Answer 1

The problem is that .animate() adds overflow: hidden while the animation is running.

One way to fix this without a lot of reworking is to set .css('overflow','visible') when you call .animate(), for example:

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

See: http://jsfiddle.net/wF2P5/4/