Проблема jQuery slideDown Snap Back

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

Проще говоря, при использовании метода 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 почти всегда ошибался в отношении высоты...

Раздел ответа также скрыт с помощью свойства 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 слово, эффект привязки не происходит.. но если я набираю несколько слов с пробелами, это происходит..

Это почти как добавление пробелов приводит к испорченной высоте.


jquery slidedown
person Cheyne    schedule 10.05.2011    source источник

Ответы (8)


arrow_upward
18
arrow_downward

Взгляните на исправления:
1. Пересмотр анимации прыжка в слайд-шоу< br> 2. Исправление jQuery slideDown () эффект прыжка

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

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

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

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

person Arman P.    schedule 10.05.2011
comment
Ив пробовал и то, и другое... до сих пор не любит. Это очень раздражает. Если я введу lorem в качестве текста, его высота составит 45 пикселей. если я введу lorem ipsom в качестве текста, его высота составит 65 пикселей. Ив понятия не имел, почему - person Cheyne; 10.05.2011
comment
Спасибо за это ... это действительно помогло остановить привязку ... за исключением того, что высота все еще неправильная ... некоторые высоты на 20 пикселей больше, чем другие ... просто из-за наличия пробелов в предложении ... я не могу понять это из :( - person Cheyne; 12.05.2011
comment
странно.. это происходит только в Chrome.. хотите верьте, хотите нет, но IE7 отлично с этим справляется - person Cheyne; 12.05.2011
comment
Ждать. . я исправил это, ваш код выше работал :) Ему был присвоен скрытый класс из другого места .... Спасибо за вашу помощь :) - person Cheyne; 12.05.2011
comment
просто примечание, чтобы помочь всем на моем месте - ie7 продолжал анимировать до нужной высоты, но затем нижняя граница моего div возвращалась на полпути. прохождение каждого элемента и установка его высоты с помощью .height() сработало. - person totallyNotLizards; 05.09.2011
comment
ничего из этого не работает. JQuery — самая тупая вещь, которая может ударить дрянных разработчиков со времен as2. - person FlavorScape; 24.03.2012

arrow_upward
11
arrow_downward

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

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

e.g.

ул ли { ширина: 100%; }

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

person Iain Collins    schedule 16.02.2012

arrow_upward
4
arrow_downward

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

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

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

  1. Прокладка вызовет это. Поместите свой дополненный контент, который вы хотите сдвинуть вниз, в новый родительский div без заполнения, и вместо этого сдвиньте этот родительский div вниз.
  2. Встроенный текст, который переносится из-за ширины, вызовет это. Добавьте white-space: pre или white-space: nowrap, чтобы решить ее.
person Waltur Buerk    schedule 23.06.2014
comment
это сработало и для меня! сначала попробовав все вышеперечисленные идеи - person dmikester1; 29.10.2014

arrow_upward
3
arrow_downward

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

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

person djrconcepts    schedule 20.02.2013

arrow_upward
0
arrow_downward

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

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}
person adredx    schedule 31.03.2013

arrow_upward
0
arrow_downward

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

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

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}
person ShayneStatzell    schedule 10.06.2014

arrow_upward
0
arrow_downward

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

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

person erb    schedule 20.08.2014

arrow_upward
0
arrow_downward

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

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);
person C Williams    schedule 18.11.2014