jQuery slideDown Snap Back Issue

Question

У меня та же проблема, о которой я читаю по всему Интернету, хотя я не могу найти решение.

Проще говоря, при использовании метода slideDown () на моих элементах DIV, я получаю тот ужасный эффект мгновенного возврата, когда jQuery слишком сильно уменьшает размер DIV, а затем возвращает его к фактическому размеру безобразно.

Просматривая веб-страницы, я попытался удалить все поля и отступы из нарушающих элементов, но ничего не сделал.

Я не могу установить статические размеры для div, потому что каждый из них будет меняться при загрузке страницы. Один загружен, хотя они не изменятся. (новые div также создаются с использованием ajax)

Вот образец DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

и CSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

Может кто-нибудь помочь мне здесь? У меня нет идей ... Iv пытался использовать jQuery, чтобы сначала выяснить высоту DIV, а затем принудительно установить высоту с помощью CSS (), прежде чем вызывать slideDown (), но jQuery почти всегда ошибался в отношении высоты ...

Div ответа также скрывается с помощью свойства display: none.

Затем вызывается эта функция

function quickResponse(time, user, message, epoch) {
    $('.latestStar').remove();
    addResponse(time, user, message, epoch);
        $('.new').slideDown(500).removeClass('hidden');
    $('html, body').animate({ scrollTop: '0px'}, 1000, function() {
    });     
}

Редактировать Я забыл упомянуть, что если div содержит только 1 слово, эффект мгновенного возврата не происходит .. но если я набираю несколько слов с пробелами, это происходит ..

Это почти как добавление пробелов приводит к тому, что высота облажается.

Answer 1

Обратите внимание на исправления:
1. Повторный просмотр анимации слайда SlideDown
2. Исправление эффекта перехода jQuery slideDown ()

Также тот же глюк задокументирован (с исправлением) на веб-сайте jQuery: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

И попробуйте добавить следующий код перед вашим кодом (при загрузке документа):

$('.new').css('height', $('.new').height());
$('.new').hide();

Таким образом, вы будете устанавливать высоту явно, и обязательно сначала отобразите свой div, приведенный выше код скроет его позже, потому что я думаю, что он не сможет установить правильную высоту на скрытую div, хотяты можешь попробовать.Удачи ~

Answer 2

У меня возникла проблема с защелкиванием при скольжении в элементе LI, который я добавлял в UL. В этом не было ничего фантастического, поэтому я нашел это озадачивающим (и видел это раньше, но не помнил, как я тогда это исправил).

В моем случае единственное исправление, которое мне было нужно, это указать ширину моего LI и плавно выполнять функции slideDown () и slideUp ().

например.

ul li {width: 100%; }

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

Answer 3

Добавьте CSS overflow: hidden к элементу, который вы хотите сдвинуть вниз.

По какой-то причине это исправило мою проблему с защелкой.

РЕДАКТИРОВАТЬ: вещи, которые путают jquery с высотой элемента, вызовут проблему возврата.

1. Заполнение приведет к этому. Поместите ваш мягкий контент, который вы хотите слайд вниз в новом родительском div без заполнения, и вместо этого сдвиньте родительский div вниз.
2. Встроенный текст, который переносится из-за ширины, вызывает его. Добавьте white-space: pre или white-space: nowrap, чтобы решить.

Answer 4

Я также получал этот уродливый огрызок.

Что исправило проблему с привязкой назад, так это применение ширины CSS к div, к которому применяется функция слайда.

Answer 5

У меня есть база данных, загружающая изображения, которые имеют одинаковую ширину, но некоторые из них имеют разную высоту, и у меня возникла проблема с этим. Что исправило это для меня, так это просто бросил setTimeout вокруг слайда моего кода.

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);

Answer 6

Добавление CSS clear: both решило проблему для меня, хотя понятия не имею, почему.

Редактировать: Добавление overflow: hidden дало мне пустой контейнер с нежелательной дополнительной высотой.

Answer 7

Еще одна вещь, которая может вызвать это, если у вас есть стиль «перехода» на самом элементе.

Пример того, что со мной происходит

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}

Answer 8

Ни одно из приведенных выше решений не работает для. Я исправил проблему, добавив следующие стили в свой контейнер:

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}