Strange jQuery behavior - slide ()

Question

if you go to this page and click one of the left drop-down menus - http://ryancoughlin.com/hp/index.php?c=about - it almost looks like a failure / stress as soon as it reaches the bottom or returns up.

Can this be fixed? Or is this how he behaves in jQuery?

CODE:

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

Answer 1

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 problem is that your fields are collapsed with h2 fields at the beginning and end of the animation, but not during the animation, because the overflow for ul not visible *, preventing collapse. The absence of collapse increases the effective ul size.

* W3 in the box model and folding fields :

Vertical fields of elements with "overflow" other than "visible" do not collapse with their daughters in the stream.

Answer 2

This is about margin. Try animating {"margin": toggle} at the same time, and this should get rid of the bump:

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

Answer 3

It looks like this could be due to the fields and add-ons that you installed in the h2 header. If you check the page with firebug and set padding and margin to 0 in the header, then "bump" will disappear. In addition, a number of styles appear to be computed next to ul when it is displayed or hidden.

Answer 4

I ran into the same problem a few days ago with a similar piece of code.

From what I read, the problem is that you need to call "hasLayout" in all browsers. Of course, this is not the real thing hasLayout , but you need to do one of them:

• Float elements. And headers, and lists, and add clarity: left for both. this should do the trick;
• Set width / height for UL elements (hidden materials);
• add position:relative for UL elements

Usually they should do the trick;)