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?

Not sure what's going on, but wouldn't animating a `margin` attribute for the inner element work instead ? — Valentin Flachsel, Nov 04 '10 at 10:05
@Freek, not if the outer div has dimensions defined.. it would push the inners left/top, but it would break outside of the outer, as the outer cannot expand due to dimensions defined.. — Gabriele Petrioli, Nov 04 '10 at 10:13
Seems this got reported. You can follow here: http://bugs.jquery.com/ticket/7399 — jitter, Nov 04 '10 at 12:21

score 32 · Accepted Answer · answered Nov 04 '10 at 10:04

32

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.

answered Nov 04 '10 at 10:04

Nick Craver

623,446
136
1,297
1,155

Thanks Nick! Always appreciate your very precise answers. Also, cool tool for code demos! – Kevin Sylvestre Nov 04 '10 at 10:10
the bug exists in the sense that it does not store the padding after the animation somehow.. even if you remove the mouseleave completely, there is a problem when you re-enter the div. The animation starts over.. – Gabriele Petrioli Nov 04 '10 at 10:11
@Gaby -I think that's caused by the mouse position shifting into it, not sure why it's being removed at all though...I'm gonna get some sleep or coffee here one, then see where this is happening – Nick Craver Nov 04 '10 at 10:13
yes but it should not reset the property on mouseenter.. asking for animation uses the current property values.. (*so it has not been stored or it gets reset. both wrong..*) – Gabriele Petrioli Nov 04 '10 at 10:15
@Gaby - Yup, agreed, seems like the problem is definitely in the css re-write, values not being retrieved correctly explains all behavior, I'll narrow it down after getting ready for the day. – Nick Craver Nov 04 '10 at 10:22

score 5 · Answer 2 · answered Nov 04 '10 at 10:03

5

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.

answered Nov 04 '10 at 10:03

jAndy

231,737
57
305
359

Thanks Andy. I appreciate the confirmation that it is a bug! – Kevin Sylvestre Nov 04 '10 at 10:12

score 1 · Answer 3 · answered Nov 04 '10 at 12:19

1

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

answered Nov 04 '10 at 12:19

jitter

53,475
11
111
124

score 0 · Answer 4 · answered Sep 16 '12 at 18:21

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

jQuery Animate Padding to Zero

4 Answers4

Linked