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

17

У меня есть 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 был добавлен для анимации.

Идеи? thxs     

задан AnApprentice 21.05.2010 в 16:56
источник

2 ответа

41

Вы можете сделать то, что хотите немного легче, используя .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-код, который будет иметь некоторые нежелательные побочные эффекты.

    
ответ дан Nick Craver 21.05.2010 в 16:59
источник
  • спасибо, мне всегда интересно делать все правильно. Я попробовал вам предложение, проблема в том, что он по-прежнему является slideDown'ом всего UL, а не только новым LI. Идеи? –  AnApprentice 21.05.2010 в 17:07
  • @nobosh - Кажется, что работает дополнительный или старый код, у вас есть страница с примерами? Здесь вы можете увидеть демо-код ответа: jsfiddle.net/KAGDu Также ... вы уверены, что <ul> не просто движется, чтобы освободить место для этого скользящего <li>? Он должен куда-то уйти :) –  Nick Craver♦ 21.05.2010 в 17:08
  • Там все идет. очень хорошо! –  AnApprentice 21.05.2010 в 18:08
  • Красиво, спасибо! –  Spike 05.08.2012 в 00:19
0

Ссылка

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

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

.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();
    }
});

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

    
ответ дан Chetan Ankola 08.09.2015 в 23:36
источник