JQuery Anteporre un LI a un UL con animazione

Question

Ho un UL e sto lavorando per aggiungere dinamicamente un nuovo LI alla parte superiore della UL con un po 'di animazione.

Ho il seguente finora che funziona bene:

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

#container è la UL

Il problema con quanto sopra è che è nasconda l'intero UL e poi scivola l'intero UL verso il basso e voglio solo il NUOVO LI che è stato anteposto ad animare.

Idee? thxs

Answer 1

Si può fare ciò che si vuole un po 'più facile utilizzando .prependTo() e $(html) , in questo modo:

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

Si può vedere una demo del codice di cui sopra qui

.prepend() restituisce l'elemento anteposto a , non l'elemento o elementi che sono stati anteposti. Commutazione intorno a .prependTo() lo rende un po 'più pulito e dovrebbe avere l'effetto desiderato, dal momento che è possibile continuare concatenamento sugli elementi che si anteposto. Inoltre, se si sta utilizzando la stessa stringa più volte, questo sarà ora memorizzare nella cache il frammento di documento e renderlo più veloce così:)

Un'ultima cosa, se si sta facendo questo più volte, assicurarsi che ID sul <li> è unico, o si sta creando HTML non valido che avrà alcuni effetti collaterali indesiderati.

Answer 2

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

questo dovrebbe aiutare

Utilizzo dei fotogrammi chiave di animazione

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

E utilizzando un javascript di base

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

È possibile ottenere la pietà.