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