jQuery slideDown стирает номер последнего вставленного элемента списка?

Question

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

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

Когда я динамически добавляю другой элемент списка с помощью jQuery и сдвигаю элемент вниз, он отображает элемент, но не номер. В результате чего-то вроде этого:

1. Item 1
2. Item 2
3. Item 3
4. Item 4
Item 5

JQuery для этого:

$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000);

Есть идеи?

Answer 1

slideDown изменяет отображение в элементе списка на block, когда оно завершено. Это необходимо для работы анимации высоты и ширины.

Вы можете исправить это, выполнив следующее:

$("ol").append("<li>Item 5</li>");
var l = $("ol").children("li:last");
l.hide().slideDown(1000, function() { $(this).css("display",""); });

Но это кажется далеко не идеальным, потому что оно ждет до конца анимации.

Answer 2

Ну, к сожалению, не должно быть простого, элегантного способа сделать это. После еще нескольких настроек я нашел другое решение, которое может подойти:

var ol = $("ol");
ol.append("<li>Item 5</li>");
var l = $("ol").children("li:last");
var h = ol.height();
l.hide();


ol.animate({
   height: h
}, 1000, function() {
   l.fadeIn(1000);
});

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

Answer 3

Если это приемлемо, fadeIn работает. Я столкнулся с такой же проблемой с таблицами / строками таблиц - анимация может сильно испортить таблицы (и, очевидно, упорядоченные списки!), Но функции замирания, похоже, работают.