CODEWITHSUNDEEP
jquerycss
user39980
user39980

Reputation:

Weird jQuery behavior - slide()

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

Upvotes: 1

Views: 1513

Answers (4)

strager
strager

Reputation: 90052

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.

Upvotes: 6

Seb
Seb

Reputation: 25157

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

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22204

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

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125538

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.

Upvotes: 0

Related Questions