jQuery SlideDown и Float Issuse - PullRequest
Новая
       2

jQuery SlideDown и Float Issuse

2 голосов
/ 18 июня 2010

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

То, что происходит, - то, что div скользит вниз ПУТЬ выше высоты содержимого, а затем «привязывается» к правильной высоте.

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

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

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

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

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

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

UPDATE:

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

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

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

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

Ответы [ 4 ]

1 голос
/ 19 июня 2010

решено:

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

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

http://jsbin.com/ajoka/11

1 голос
/ 18 июня 2010

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

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();
  });
});
0 голосов
/ 17 октября 2012

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

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

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

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

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

0 голосов
/ 22 октября 2011

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

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

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

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

...