Подтвердить что ты не робот

JQuery slideDown Snap Back Issue

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

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

Посмотрев через Интернет, я попытался удалить все поля и отступы от оскорбительных элементов, но ничего не делает.

Я не могу установить статические размеры для div, потому что каждый из них будет меняться при загрузке страницы. Один загружен, хотя они не изменятся. (новые divs также создаются с использованием 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}

Может ли кто-нибудь помочь мне здесь? Im из идей. 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() {
    });     
}

Edit Я забыл упомянуть, что если div содержит только одно слово, эффект привязки не произойдет. Но если я наберу несколько слов с пробелами, это произойдет.

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

4b9b3361

ОТВЕТЫ

Ответ 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, хотя вы можете попробовать, Удачи ~

Ответ 2

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

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

например.

ul li {ширина: 100%; }

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

.clear:after {
   clear: both;
}

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

Ответ 6

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

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

* {
     transition: .3s;
}

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

Ответ 7

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

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

Ответ 8

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

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