JQUERY Превращение LI в UL с анимацией

У меня есть UL, и я работаю над динамическим добавлением нового LI к вершине UL с некоторой анимацией.

У меня есть следующее, что работает нормально:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container является UL

Проблема с вышесказанным заключается в том, что он скрывает весь UL, а затем скользит весь UL вниз, и я просто хочу, чтобы NEW LI был добавлен для анимации.

Идеи? спасибоs

Ответ 1

Вы можете сделать то, что хотите немного легче, используя .prependTo() и $(html), например:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

Здесь вы можете увидеть демо-код здесь

.prepend() возвращает элемент , добавленный к, а не элемент или элементы, которые были добавлены. Переключение его на .prependTo() делает его немного чище и должно иметь нужный эффект, так как вы можете продолжить цепочку элементов, которые вы добавили. Кроме того, если вы используете одну и ту же строку много раз, теперь она будет кэшировать фрагмент документа и сделать его быстрее:)

Последнее, если вы делаете это несколько раз, убедитесь, что идентификатор на <li> уникален, или вы создаете недействительный HTML-код, который будет иметь некоторые нежелательные побочные эффекты.

Ответ 2

http://jsfiddle.net/eCpEL/13/

это должно помочь

Использование анимации ключевого кадра

.comefromtop {
    animation: comefromtop 0.5s;
}
.pushdown {
    animation: pushdown 0.5s;
}

@-webkit-keyframes comefromtop {
  0%   { opacity:0; -webkit-transform: translateY(-100%); }
  100% { opacity:1; -webkit-transform: translateY(0px);   }
}

@-webkit-keyframes pushdown {
  0%   { /*opacity:0;*/ -webkit-transform: translateY(-10%); }
  100% { /*opacity:1;*/ -webkit-transform: translateY(0);   }
}

И используя базовый javascript

function add() {
    var val = $('#input').val();
    var item = $('<li></li>').addClass('comefromtop').attr('id',val).text(val);         $('#Trees').prepend(item).addClass('pushdown');
    setTimeout(function () {
        $('#Trees').removeClass('pushdown');
    }, 600);
}
$('.add').click(add);
$('#input').on('keypress',function (e) {
    if (e.keyCode === 13) {
        add();
    }
});

Вы можете достичь благочестия.