使用jquery，如何动画添加新的列表项到列表？ [英] Using jquery, how to I animate adding a new list item to a list?

问题描述

我有一个简单的javascript函数，允许我将项添加到列表中。请注意，我使用JQuery ...

I have a simple javascript function that allows me to add an item to a list. Note that I use 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> 's。

The 'listName' is simply an <ul> with some <li>'s.

前置工作正常，但我无法使slideDown效果起作用。我希望列表项向下滑动，然后新项目显示在顶部。任何想法如何实现这一目标？我还是JQuery的新手......

The prepending works fine, but I can't get the slideDown effect to work. I would like the list items to slide down and the new item to then appear on top. Any ideas how to accomplish this? I'm still new to JQuery...

推荐答案

如果你想在同一时间添加它并向下滑动这个：

If you wanted it to be added and slide down at the same time do this:

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

要真正做到你所描述的（向下滑动，然后淡入），你需要这样的东西：

To truly do exactly what you described (slide down, then fade in), you would need something like this:

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

这篇关于使用jquery，如何动画添加新的列表项到列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！