jQuery slideDown и SlideUp в таблице выглядят неправильно - PullRequest
Новая
       29

jQuery slideDown и SlideUp в таблице выглядят неправильно

2 голосов
/ 14 сентября 2011

У меня небольшая проблема с jQuery slideUp и slideDown, когда я использую его в таблице. У меня есть HTML, как это (также в основном сгенерированный jQuery, но это не важно): 

<tr class="expandable-container">
  <td colspan="10">
    <div id="3_expandable" style="display: none;">
      <table class="innerTable">
        ...
      </table>
    </div>
  </td>
</tr>

Стиль для внешнего стола: 

.main-table {
    border-radius: 0.5em 0.5em 0 0;
    width: 129em;
    background-color: #f1f1f1;    
    margin-top: 1.5em;
    z-index: 10;
    position: relative;
}

.main-table td, .main-table th {
    padding: 1.2em 0.7em;
    border-collapse: collapse;
    border-left: 0.1em solid #dedede;
}

.main-table td:first-child, .main-table th:first-child {
    border-left: 0 solid;
}

.expandable-container td {
    padding: 0 !important;
    background-color: red; /* inserted to identify the problem */
}

Поскольку slideUp и slideDown не работают с элементами таблицы, я обернул содержимое (которое является другой таблицей, но не важно) в элемент div, который, конечно, скрыт. Когда я применил методы slideUp и slideDown и протестировал его в Firefox 6, по какой-то причине анимация показалась небрежной. Поэтому я установил 10-секундное время слайда, чтобы проверить его, и определил, что когда анимация начинается, элемент td появляется сразу с высотой == 20px, и div скользит внутри него. Затем все идет так, как ожидалось - когда div превышает начальную неожиданную высоту td, он закрывает ее и расширяется до предполагаемого размера.

Это происходит в Firefox 6. Он работает без проблем в Chrome 13. Я не тестировал его ни в одной версии IE, потому что он не предназначен для браузера, поэтому мне не пришлось проходить через все проблемы с установить его на машине Linux. Не проверено в Opera также потому, что теперь на нем происходит сбой другого скрипта, который нужно исправить.

Я прилагаю скриншот самого первого момента анимации слайддауна - когда тд появляется из ниоткуда (красный фон).

slideDown - first phase

Мой вопрос - есть ли способ или обходной путь, чтобы это исправить?

Как предложил Ариэль, я добавил его как jsFiddle. Как ни странно, там хорошо работает даже на FF6: jsFiddle rendition

EDIT: я исправил проблему, которая вызвала сбой в Opera 11, поэтому я смог протестировать его. Так что - это происходит и в Opera 11.

1 Ответ

2 голосов
/ 14 сентября 2011

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

Но я не могу точно ответить наверняка, поскольку не вижу, чтобы это происходило. (Вы, вероятно, должны попытаться выяснить, что отличается в скрипте от вашего реального кода - попробуйте комментировать разделы CSS).

...