Странное поведение jQuery - slide ()

Question

если вы перейдете на эту страницу и нажмете один из левых выпадающих списков - http://ryancoughlin.com/hp/index.php?c=about - это почти похоже на то, что он глючит / натыкается, как только он достигает дна или снова поднимается наверх.

Можно ли это исправить? Или это так в jQuery?

КОД:

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

Answer 1

В вашем CSS измените

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

до

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

Проблема в том, что ваши поля сворачиваются с полями h2 в начале и в конце анимации, но не во время анимации, потому что overflow из ul не visible*, предотвращение разрушения. Отсутствие разрушения увеличивает эффективный размер ul.

* W3 на блочной модели и сворачивание полей :

Вертикальные поля элементов с «переполнением», отличным от «видимого», не разрушаются вместе со своими дочерними элементами в потоке.

Answer 2

Я столкнулся с той же проблемой несколько дней назад с похожим фрагментом кода.

Из того, что я прочитал, проблема в том, что вам нужно запустить hasLayout во всех браузерах. Конечно, это не настоящая hasLayout вещь, но вам нужно сделать одно из следующих действий:

• Поплавковые элементы. И заголовки и списки, и добавить ясно: осталось для обоих. это должно сработать;
• Установить ширину / высоту для UL элементов (скрытые элементы);
• добавить position:relative для UL элементов

Обычно, те должны делать свое дело;)

Answer 3

Похоже, что это может быть связано с полем и отступом, которые вы установили в ссылке заголовка h2. Если вы осмотрите страницу с помощью firebug и установите для заголовка padding и margin значение 0, то «выпуклость» исчезнет. Кроме того, число стилей, по-видимому, рассчитывается рядом с ul, когда оно отображается или скрывается.

Answer 4

Это связано с маржей. Попробуйте анимировать {"margin": toggle} одновременно, и это должно избавить от неровностей:

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