Usando jquery, ¿cómo animar agregar un nuevo elemento de lista a una lista?

Question

Tengo una función de JavaScript simple que me permite agregar un elemento a una lista. Nótese que uso jQuery ...

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

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

El 'Nombrelista' es simplemente una <ul> con algunos <li> 's.

El precedente funciona bien, pero no puedo hacer que funcione el efecto slideDown. Me gustaría que los elementos de la lista se deslizaran hacia abajo y que el nuevo elemento apareciera en la parte superior. ¿Alguna idea de cómo lograr esto? Todavía soy nuevo en jQuery ...

Answer 1

Si desea que se agregue y deslice hacia abajo al mismo tiempo hacer esto:

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

Para realmente hacer exactamente lo que usted describe (deslice hacia abajo, continuación fundido de entrada), lo haría necesita algo como esto:

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

Answer 2

Probar:

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

En otras palabras:

• Cree el nuevo elemento de la lista;
• Ocultarlo (por lo que no es visible cuando se agrega a la lista);
• Agrégalo al principio de la lista; luego
• Deslícela hacia abajo. Los otros elementos se deslizarán hacia abajo.

Answer 3

http://jsfiddle.net/eCpEL/13/

esto debería ayudar

Utilizando animación de fotogramas clave

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

Y utilizando un javascript básica

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

Se puede lograr la piedad