JQUERY Добавление LI к UL с анимацией - PullRequest
Новая
       24

JQUERY Добавление LI к UL с анимацией

17 голосов
/ 21 мая 2010

У меня есть 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

Ответы [ 2 ]

41 голосов
/ 21 мая 2010

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

0 голосов
/ 09 сентября 2015

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

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

...