jQuery animate padding doesn't work correctly in Chrome

Question

I have few nested divs and one of them has padding. I try to animate padding on that div with:

$("div").animate({paddingRight: 60});

The problem is that in IE and FF, nested divs are being resized correctly but not in Chrome. Look at my example here: http://jsfiddle.net/smashko/zu6aX/. Press Remove Padding and Add Padding buttons to see what happens in FF and IE.

Why doesn't it work in Chrome?

EDIT:

Actually, as Stefan pointed out, the animation is working correctly, but the new CSS values are not being applied.

If you click Inspect element after the animation has finished, Chrome will refresh it and it will be ok.

So, the question is how do I make Chrome apply animated CSS values automatically?

Answer 1

The animation works just fine but your CSS won´t show any difference.

Updated your example to use a callback function in animate(). Check the console to see the value before and after the animation: http://jsfiddle.net/dbDsM/

You will also see it working if you animate paddingLeft instead.