HeightToggle height - "прыгать"

Ответ 1

Это простое исправление. Добавьте это правило CSS в таблицу стилей (протестировано в Firebug для работы, и из моего прошлого опыта с этой проблемой это исправление):

ol.message_list { position: relative }

Это ошибка CSS, а не ошибка jQuery как таковая.

Ответ 2

Что мне помогает

overflow: hidden

к этому переключателю...

Ответ 3

Самое быстрое исправление в вашем случае:

.message_container { width: 361px; }

Я не уверен, почему именно, но не давая контейнеру фиксированную ширину при содержащем <p>, вызывает проблемы, давая ей одно, а неустойчивость уходит.

Ответ 4

css padding и jquery slideToggle не работают хорошо. Попытайтесь заполнить пробел.

Ответ 5

Я нашел эту проблему во многих случаях, когда я анимации только высоты с slideToggle, но не поля/дополнения.

Итак, что-то вроде этого может решить:

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});

Ответ 6

Если установлено, свойство min-height также может вызвать такой сбой. В этом случае вам нужно reset it:

.toggle-container {
position: relative;
min-height: 0;
}

Ответ 7

Случайно я считаю, что самым простым в использовании решением является добавление пользовательской функции в jQuery с анимированным дополнением /margin -top/bottom тоже.

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

И пример использования:

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

Мой пример анимированной opacity toggle tu, вы можете изменить его по мере необходимости.

Ответ 8

Я считаю, что самое простое исправление обычно заключается в удалении прокладки из элемента, который скользит, и добавляет дополнение к элементу внутри скользящего элемента.

В этом примере div с атрибутом data-role="content" является та, которая слайдов, а дополнение применяется к tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

Чтобы исправить "отрывистое" скольжение, я добавил новый div внутри скользящего элемента и переместил класс/дополнение к такому:

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

Теперь он приятный и гладкий

Ответ 9

Я нашел еще одну вещь, которая влияет на это. Удаление min-height из CSS этого элемента исправило это для меня.

Ответ 10

если у переключенного блока по умолчанию нет высоты, вам нужно добавить его, для автоматической высоты добавьте следующее:

.toggle-container {
 height: auto;
}

Ответ 11

Я обнаружил, что установка ширины в переключаемом контейнере решила проблему для меня

.toggle-container { 
   width: 100%; }
}

Я читаю, что slideToggle полагается на начальную ширину и высоту для правильного функционирования, поэтому в зависимости от вашей страницы вам может потребоваться установить ширину или высоту, чтобы получить ожидаемое поведение.

Ответ 12

В моей прошлой ситуации у меня была та же проблема, и проблема была в том, что у меня был transition: all 350ms; объявление в моем CSS, который конфликтовал с .slideToggle. Удаление это исправило для меня, так что ищите переходы в CSS.

Ответ 13

Я не знаю, является ли это все еще проблемой, но что исправило это для меня, было то, что я ранее использовал CSS, чтобы "оживить" это, таким образом, у меня был эффект transition на элемент. Удаление это исправило это для меня.