jQuery Animate Padding to Zero

Question

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

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.

Answer 3

Another solution would be to use a cssHook. Brandon Aarons jquery-cssHooks come to mind (in this case the padding hook in marginpadding.js)

You can test it here

Answer 4

I just realized jquery is not reacting very well to hyphens "-" within animation but you get the same result by getting ride of the hyphen and capitalizing the first letter after. So for you will have something like this:

    $("#inner").mouseleave(function () {
       $("#outer").animate({
     paddingTop : 0,
         paddingRight : 0,
         paddingBottom : 0,
         paddingLeft : 0,
         borderLeftWidth: 0,
         borderTopWidth: 0,
         borderRightWidth: 0,
         borderBottomWidth: 0,

 }, slow);