JQuery <Li>Slide Up анимация

Question

Я пытаюсь сдвинуть отдельные элементы <li> в пределах <ul> вверх, но эффект, который я получаю, похож на анимацию «жалюзи», а не на скольжение вверх.

Вотпосмотрите на мой текущий код: http://jsfiddle.net/VpApX/

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

Как я могу заставить элементы скользить полностью вверх или убрать рывок, который происходит, когда я сдвигаю весь ul?

Редактировать

http://jsfiddle.net/VpApX/4/ Анимация, когда вы нажимаете «Test Ul», - это то, к чему я стремился, по какой-то причине я не получаю отрывистое завершение анимации, хотя это решает мою проблему,Я как-то исправил это копирование в jsfiddle .....

Answer 1

Резкий рывок, который вы испытываете, является довольно известной ошибкой, возникающей при использовании методов слайдов в jQuery для элемента, который не имеет определенной высоты. Я предполагаю, что вы не хотите устанавливать определенную высоту, потому что она всегда должна изменяться всякий раз, когда меняется стиль, или вы решаете, чтобы более 4 элементов были видны в списке одновременно. Решение состоит в том, чтобы установить высоту, используя JS, когда DOM готов:

$(function(){
    var ul = $('ul');
    ul.height(ul.height()); //the ul element now has an inline style equal to the height the browser originally had to compute
});

Answer 2

Приведенный выше ответ верен в отношении причины, но пример устанавливает ВСЕ UL одинаковой высоты. Если у вас есть разные объемы контента, вам нужно будет перебирать их так:

$(function(){
    $('ul').each(function(){
        $(this).height($(this).height());
    });
});