slideToggle expands too far/jumps back

Question

If you click the SERVICES link under the logo the menu will expand a little too far and then in one quick flash, it cuts back to the desired height. Any way to cure this bug?

$(document).ready(function() {
  $("li#service-toggle-link").click(function () {
    $(".toggle-content").slideToggle("slow");
  });
});

Must be browser specific, cause it works like a charm in Chrome ? — adeneo, Jun 21 '13 at 23:20
Weird, it doesn't seem to work at all for me in Chrome or Safari — Corey Tegeler, Jun 21 '13 at 23:26
The LI elements are wider than the menu, so the border sticks out on the right side, but there is no jumping when the menu slides down. Did you hit CTRL-F5 to clear the cache etc ? — adeneo, Jun 21 '13 at 23:32
I'm not really sure what you mean by that, it doesn't appear to be an issue — Corey Tegeler, Jun 21 '13 at 23:40

score 0 · Answer 1 · answered Jun 21 '13 at 23:41

0

It works fine in FF when you set the height of div.toggle-content (for example for 176px)

I dunno why, maybe FF has some issues with autoheight

answered Jun 21 '13 at 23:41

Bart Az.

1,644
1
22
32

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Your <nav id="site-navigation"> seems to have an unnecessary display: table. Try removing it and everything should work fine.

Tables are not meant to be animated with jQuery, you can read more here: https://stackoverflow.com/a/920480/1446845

edited May 23 '17 at 12:05

Community

1
1

answered Jun 22 '13 at 00:21

Aurelio

24,702
9
60
63

slideToggle expands too far/jumps back

2 Answers2