Использование jQuery SlideDown и Float

У меня возникла проблема с jQuery slideDown, когда содержимое объекта, который я скользил вниз, всплывает.

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

Я думаю (просто теория), что div скользит вниз в зависимости от высоты, которой он был бы, если бы содержимое внутри не плавало. Например, если у меня есть 4 плавающих элемента, div, кажется, расширяется вдвое больше, чем когда у меня есть 2 плавающих элемента.

Никакое количество поплавков с хаками clearfix, похоже, ничего не исправит.

Решение, которое я использовал в прошлом (и то, которое рекомендуется), состоит в том, чтобы установить высоту элемента с помощью CSS ПЕРЕД его скрытием. Таким образом, слайдер знает, как далеко идти.

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

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

Кто-нибудь знает способ исправить это слайд-шоу с плавающим контентом без предварительной фиксации высоты с помощью CSS без необходимости сначала вручную перемещать высоту настройки dom?

ОБНОВИТЬ:

пример кода здесь:

http://jsbin.com/ajoka/10/

(нажмите на страницу, чтобы увидеть, как она скользит)

Это основано на конкретных стилях, которые я использую, и в этой конкретной комбинации вы увидите проблему. Обратите внимание, что DIV, для которого задано значение slideDown, имеет розовый фон. Он соскользнет ДАЛЬШЕ, чем его содержимое, а затем быстро вернется в нужное место.


jquery css-float slidedown
person DA.    schedule 18.06.2010    source источник
comment
Привет. Есть ли решение?   -  person Volodymyr    schedule 25.11.2020

Ответы (4)


arrow_upward
1
arrow_downward

Я не могу воспроизвести проблему. Пожалуйста, предоставьте код. Это работает так, как ожидалось:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="assets/js/application.js" type="text/javascript"></script>
</head>
<body>
  <div id="test">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</body>
</html>

CSS

#test div { width: 200px; height: 200px; float: left; outline: 1px solid #000; }

JS

$(function(){
  $('#test').hide();
  $(window).click(function(){
    $('#test').slideDown();
  });
});
person Fred Bergman    schedule 18.06.2010
comment
хм... ты прав! Должна быть еще одна переменная, которую мне не хватает... Я продолжу копать - person DA.; 18.06.2010
comment
@Fred ... Я пробовал всевозможные варианты, но не смог воспроизвести их с нуля. Я, наконец, дословно скопировал элементы сайта проблемы, и ТОГДА проблема вернулась. Так что это какая-то странная комбинация моего конкретного CSS. Я добавил ссылку на образец в свой исходный пост. - person DA.; 19.06.2010

arrow_upward
1
arrow_downward

решено:

удалить margin-bottom:10px; из своего

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11

person Starx    schedule 19.06.2010
comment
Это исправляет демо! Увы, не наша специфическая разметка. Фу. Слишком много факторов! В моем случае я обнаружил, что удаление «position: relative» из плавающих элементов решает проблему. Проблема в том, что они ДОЛЖНЫ быть позиционированы относительно в определенных случаях (когда их содержимое позиционируется абсолютно). Вернемся к тестовой доске... - person DA.; 19.06.2010
comment
@Da, почему бы тебе не опубликовать весь код, я посмотрю на него. - person Starx; 19.06.2010

arrow_upward
0
arrow_downward

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

Вот решение, которое, хотя и не является оптимальным, подходит для большинства ситуаций.

Добавьте padding-bottom: 1px; в свою оболочку. В моем случае оболочка является родителем анимированного div.

Надеюсь, это поможет.

person jmlnik    schedule 22.10.2011

arrow_upward
0
arrow_downward

Я также столкнулся с той же проблемой. Два файла с одинаковым кодом HTML, но один из них показывал эту проблему. В качестве решения я рассчитал высоту div, которая скользила с помощью jQuery:

var somevar=$('#contentBody').outerHeight();

Затем я сохранил его в переменной и снова применил к этому div перед применением эффекта slideDown:

$('#contentBody').height(somevar);

Этот трюк решил проблему.

person Pravin Varma    schedule 17.10.2012