index - jquery selector

JQUERY Prependiendo un LI a un UL con animación

Question

Tengo un UL y estoy trabajando para agregar dinámicamente un nuevo LI a la parte superior del UL con algunas animaciones.

Tengo lo 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 el UL

El problema con lo anterior es que oculta todo el UL y luego desliza todo el UL hacia abajo y solo quiero que el NUEVO LI que se ha añadido para animar.

Ideas? gracias

Answer 1

Puedes hacer lo que quieras un poco más fácil usando .prependTo() y $(html) , como esto:

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

Puedes ver una demo del código anterior aquí

.prepend() devuelve el elemento al que antepasó , no el elemento o elementos que fueron antepuestos. .prependTo() a .prependTo() hace un poco más limpio y debería tener el efecto que desea, ya que puede continuar encadenando los elementos que agregó. Además, si está utilizando la misma cadena muchas veces, ahora se almacenará en caché el fragmento del documento y también lo hará más rápido :)

Una última cosa, si está haciendo esto varias veces, asegúrese de que la ID en <li> sea ​​única, o que esté creando un HTML no válido que tendrá algunos efectos secundarios no deseados.

Answer 2

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 usando un javascript básico.

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

Puedes lograr la piedad.