javascript - 使用jquery，如何为新列表项添加动画效果？

我有一个简单的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的新手...

最佳答案

如果您希望添加它并同时向下滑动，请执行以下操作:

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