使用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’只是一个带有

的

。

前置工作正常，但我无法使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

尝试：

 $("
new item
").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 = $('
').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(); } }); 

你可以实现敬虔