ошибки slideDown и slideUp

Question

Я новичок в jQuery и уже вижу проблемы со встроенным Анимация slideDown () / slideUp (). Я использую гибкую ширину элемент, и когда я использую функцию, элемент не возвращается к это полная ширина. Я думаю, что это как-то связано с тем, как jQuery находит ширину элемента. Я испытываю ошибку в Safari 3 и Firefox 3.1 для OS X. Ниже приведен HTML-код для страницы:

<div id="archive">
    <h2 class="first open">May</h2>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list">
         <tr class="first">
              <td width="65%"><a href="#">This month</a></td>
              <td align="right">Sunday, May 31   <input type="button" value="Edit"/></td>
         </tr>
    </table>
</div>

И Javascript:

// Enable month names to re-open divs
$("#archive h2").not(":last").wrapInner("<a href='#'></a>").end().find
("a").click(function(event){

event.preventDefault();

var h2 = $(this).parent();

if (h2.hasClass("open")) { // Close

    h2.removeClass("open");
    h2.next().slideUp("fast");


} else { // Open

    h2.addClass("open");
    h2.next().slideDown("fast");


}

});

Эта проблема может быть несколько решена путем переноса внутрь, но затем в Firefox возникает новая ошибка, когда анимация slideDown прыгает ближе к концу.

Любая помощь будет оценена.

Спасибо, Брендан

Answer 1

«Прыжок» происходит из-за того, что элементы H2 имеют поля и согласно правилам CSS вертикальные поля будут сворачиваться .

Перед началом анимации заголовки H2 разделены таблицами. Заголовки имеют некоторые поля над и под ними, в таблице нет полей:

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
||||||||||||||||||||||||||||
|TABLE in the middle       |
||||||||||||||||||||||||||||
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

Затем таблица плавно анимируется, оставляя только два заголовка:

+--------------------------+
|                          |
|H2: April                 |
|                          |
+--------------------------+
|                          |
|H2: May                   |
|                          |
+--------------------------+

И вдруг между этими заголовками больше не остается таблицы, и поля исчезают, давая вам что-то вроде этого:

+--------------------------+
|                          |
|H2: April                 |
|                          |
|H2: May                   |
|                          |
+--------------------------+

И этот крах вызывает «прыжок».

Одним из возможных решений этой проблемы является замена полей H2 на отступы:

#archive h2 {
  margin: 0;
  padding: 0.5em 0;
}

Прокладки не разрушатся.

Answer 2

Получается, что исправление заключалось в том, чтобы вложить каждую таблицу в элемент div, а затем установить ширину таблицы в статическую ширину. В моем случае «600px». Я провел некоторые эксперименты и, насколько я помню, когда jQuery находит высоту элемента, он устанавливает его в положение: abolsute; visibility: none ;, который в моем случае оставил 100% ширину, с которой ничто не могло сравниться, рендеринг был примерно 100px шириной и выше, чем должен был быть. Так что jQuery анимировал до этой высоты, а затем вернул все обратно в нормальное состояние, заставив браузер вернуться к реальной высоте.