Weird jQuery behavior - slide()

Question

if you go to this page and hit one of the left dropdowns - http://ryancoughlin.com/hp/index.php?c=about - it almost looks like it is glitching/bumping, once it gets to the bottom or rides back up top.

Is it possible to fix this? Or is this how it behaves in jQuery?

CODE:

$(".menu-header").click(function() {
    $(this).next().toggle('slow');
    return false;
}).next().hide();

strager · Accepted Answer · 2009-03-19T23:21:24.907

6

In your CSS, change

#left ul li{
    font-size:.7em;
    margin:5px 0;
}

to

#left ul li{
    font-size:.7em;
    padding:2px 0 3px 0;
}

The issue is that your margins are collapsing with the margins of the h2 at the beginning and end of the animation, but not during the animation, because overflow of the ul is not visible*, preventing the collapsing. The lack of collapsing increases the effective size of the ul.

*W3 on the box model and margin collapsing:

Vertical margins of elements with 'overflow' other than 'visible' do not collapse with their in-flow children.

edited Mar 19 '09 at 23:21

answered Mar 19 '09 at 22:23

strager

88,763
26
134
176

Hey, that seemed to do the trick. Why did that work? Margin problems>? Thanks, Ryan – Mar 19 '09 at 23:00
If this is the answer to your problem, please mark it as so. :) – Paolo Bergantino Mar 19 '09 at 23:07

Seb · Answer 2 · 2009-03-19T22:47:32.023

0

This has to do with margin. Try animating {"margin": toggle} at the same time and that should get rid of the bumping:

$(".menu-header").click(function() {
  $(this).next().animate({"margin": "toggle", "height": "toggle"});
  return false;
});

edited Mar 19 '09 at 22:47

answered Mar 19 '09 at 22:12

Seb

24,920
5
67
85

Hey sorry! I am using toggle, check my code above, will that still work? – Mar 19 '09 at 22:17
Hey Seb, i tried that and still the same thing, I will give those other answers above a shot. It seems like that should work, the code you posted. Thanks, Ryan – Mar 19 '09 at 23:00

Russ Cam · Answer 3 · 2009-03-19T22:19:08.287

0

It looks as though it might be to do with the margin and padding that you have set on the h2 header link. If you inspect the page with firebug, and set padding and margin to 0 on the header, then the "bump" disappears. Also, a number of styles appear to be calculated next to the ul when it is shown or hidden.

edited Mar 19 '09 at 22:19

answered Mar 19 '09 at 22:14

Russ Cam

124,184
33
204
266

score 0 · Answer 4 · answered Mar 19 '09 at 22:45

I encountered same problem few days ago with a similar piece of code.

From what I've read, the problem is that you need to trigger "hasLayout" in all browsers. Of course, is not a real hasLayout thing, but you need to do one of these:

Float elements. Both titles and lists and add clear:left for both. this should do the trick;
Set width/height for UL elements (hidden stuff);
add position:relative for UL elements

Usually, those should do the trick ;)

Weird jQuery behavior - slide()

4 Answers4

Linked