jQuery Animate Padding to Zero

Question

I have the following snippet that toggles padding when hovering (see example here):

<div id="outer"><div id="inner"></div></div> 
<script> 
  $("#inner").mouseenter(function () {
    $("#outer").animate({ 'padding' : '20px' }, "slow");
  });
  $("#inner").mouseleave(function () {
    $("#outer").animate({ 'padding' : '0px' }, "slow");
  });
</script>

The goal is to have the padding animate both in and out, however currently no animation appears for animating out. I did some tests, and if I change the leave padding to 10 pixels (from 0 pixels) it runs an animation, but starts at zero and animates outwards. I'm running jQuery 1.4.3. Any way to fix this?

Answer 1

Definitely an animation bug in 1.4.3, for now you can work-around by animating the individual properties like this:

$("#inner").mouseleave(function () {
  $("#outer").animate({ 
    'padding-top' : 0,
    'padding-right' : 0,
    'padding-bottom' : 0,
    'padding-left' : 0,
  }, "slow");
});

You can test it out here.

Answer 2

Looks like a bug in 1.4.3 (rewritten css part). 1.4.2 works fine:

http://www.jsfiddle.net/YjC6y/44/

I will investigate it further and update this post.