Используя jquery, как мне анимировать добавление нового элемента в список?

Question

У меня есть простая функция javascript, которая позволяет мне добавить элемент в список. Обратите внимание, что я использую JQuery ...

function prependListItem(listName, listItemHTML)
{
    //Shift down list items...
    $("#" + listName + " li:first").slideDown("slow");

    //Add new item to list...
    $(listItemHTML).prependTo("#" + listName)       
}

'listName' - это просто <ul> с некоторыми <li>.

Предварительное добавление работает нормально, но я не могу заставить эффект slideDown работать. Я бы хотел, чтобы элементы списка скользили вниз, а новый элемент появлялся сверху. Есть идеи, как это сделать? Я все еще новичок в JQuery ...

Answer 1

Если вы хотите, чтобы он был добавлен и одновременно перемещался вниз, сделайте следующее:

function prependListItem(listName, listItemHTML){
    $(listItemHTML).hide().prependTo('#' + listName).slideDown('slow');
}

Чтобы действительно сделать то, что вы описали (скользить вниз, затем исчезать), вам нужно что-то вроде этого:

function prependListItem(listName, listItemHTML){
    $(listItemHTML)
        .hide()
        .css('opacity',0.0)
        .prependTo('#' + listName)
        .slideDown('slow')
        .animate({opacity: 1.0})
}

Answer 2

Попробуйте:

$("<li>new item</li>").hide().prependTo("#" + listName).slideDown("slow");

Другими словами:

• Создать новый элемент списка;
• Скрыть его (чтобы оно не отображалось при добавлении в список);
• Добавьте его в начало списка; то
• Слайд вниз. Другие предметы будут скользить вниз.

Answer 3

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

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