JQUERY Voranstellen eines LI an eine UL mit Animation,

Question

Ich habe eine UL und ich arbeite dynamisch mit einiger Animation eine neue LI an die Spitze des UL hinzuzufügen.

Ich habe bisher die folgenden, die funktioniert ok:

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

#container ist die UL

Das Problem mit der oben ist, dass verbirgt die gesamte UL und gleitet dann die gesamte UL, und ich möchte nur den NEW LI, den belebten vorangestellt wurde.

Ideen? thxs

Answer 1

Sie können tun, was Sie ein bisschen leichter mit wollen .prependTo() und $(html) , wie folgt aus:

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

Sie eine Demo des obigen Code sehen hier

.prepend() gibt das Element, das Sie auf vorangestellt: , nicht das Element oder Elemente, die vorangestellt wurden. Schalten Sie um auf .prependTo() macht es ein wenig sauberer und sollte den Effekt, den Sie haben wollen, da Sie weiter Chaining auf die Elemente, die Sie vorangestellt. Auch, wenn Sie die gleiche Zeichenfolge mehrmals verwenden, wird dies nun das Dokument Fragment-Cache und macht es schneller als gut:)

Eine letzte Sache, wenn Sie dies mehrere Male tun, stellen Sie sicher, dass ID auf dem <li> eindeutig zuzuordnen sind, oder Sie ungültige HTML zu schaffen, die einige unerwünschte Nebenwirkungen haben.

Answer 2

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

sollte

Hilfe

Mit Keyframe-Animation

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

Und mit einem Grund Javascript

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

Sie können godliness erreichen.