Анимация высоты jQuery переходит, когда анимированный элемент имеет более 1 строки дочерних элементов - PullRequest
Новая
       20

Анимация высоты jQuery переходит, когда анимированный элемент имеет более 1 строки дочерних элементов

2 голосов
/ 01 сентября 2011

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

У меня такой вопрос: есть ли у кого-нибудь какая-либо информация оанимация высоты jQuery (например, slideUp (), slideDown () или slideToggle ()), анимирующая частично, затем «прыгающая» остальную часть пути, и чем это вызвано?

У меня есть скрипка: http://jsfiddle.net/d7tbh/

ПРИМЕЧАНИЕ: прежде чем вы проголосуете за меня из-за скрипки, пожалуйста, прочитайте остальное.

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

Более подробное объяснение проблемы:

Та же самая разметка и css и скрипт для скрипки.Нажатие на элемент .header сдвигает элемент .child.Однако высота .child соответствует высоте одного элемента .child-item, независимо от количества «строк».После завершения анимации высота .child переходит на полную высоту, необходимую для хранения всех дочерних элементов .child-item.Однако на скрипке все работает нормально - есть идеи?

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

1 Ответ

0 голосов
/ 02 сентября 2011

Это не лучший ответ, но я нашел способ поместить <br style='clear:both;'/> на страницу каждые 3 дочерних элемента, чтобы разбить строки вручную.

Это исправило анимацию slideDown(), сделало ее плавной и остановило прыжки.

Проблема с этим исправлением заключается в том, что он полагается на возможность распечатывать <br> каждый x children (это можно сделать с помощью js, но я использовал php), а также это означает, что если у вас жидкая компоновка, это будет нарушаться на более широких / больших экранах, но, поскольку у меня фиксированная компоновка, это не дает шансов.

Код:

Сценарий и CSS не изменены, единственное, что я делаю, это добавляю немного дополнительной разметки:

PHP, который я использовал (тест модуля)все, что нужно для этого): 

$count=0;
do {
  $count++;
  echo '<div class="child-item">etc</div>';

  if ($count%3==0)
  {
    //this is the third in this row, print a break
    echo '<br style="clear:both;"/>';
  }
}while($sqlResults);

Как вы можете сделать что-то подобное в jQuery: 

var count=0;
$('.child').each(function(){
    count=0;
    //for each container element, loop through its children
    $(this).children('.child-item').each(function(){
        count++;
        if (count%3==0)
        {
           //this item is the third in a row, print a br.
           $(this).after('<br style="clear:both;"/>');
        }
    });
});

РЕДАКТИРОВАТЬ: обновленный скрипт скрипта http://jsfiddle.net/d7tbh/1/

...