JQUERY Prepending un LI a un UL con la animación

Question

Tengo un UL y estoy trabajando para añadir dinámicamente un nuevo LI a la parte superior de la UL con un poco de animación.

Tengo el siguiente hasta ahora que funciona bien:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container es la UL

El problema con lo anterior es que se esconde toda la UL y luego se desliza hacia abajo toda la UL y simplemente desea que el nuevo LI que se antepone a animar.

ideas? thxs

Answer 1

Se puede hacer lo que quiera un poco más fácil el uso de .prependTo() y $(html) , como este:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

Puede ver una demostración del siguiente código aquí

.prepend() devuelve el elemento que antepuesto a , no el elemento o elementos que se antepone. De ponerlo en torno a .prependTo() hace que sea un poco más limpio y debe tener el efecto deseado, ya que se puede continuar el encadenamiento de los elementos que antepone. Además, si usted está utilizando la misma cadena muchas veces, esto será ahora almacenar en caché el fragmento de documento y hacerlo más rápido, así:)

Una última cosa, si está haciendo esto varias veces, asegúrese de que el ID de <li> es único, o que está creando HTML no válido que tenga algunos efectos secundarios no deseados.

Answer 2

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

Esto debería ayudar

Uso de fotograma clave de animación

.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.