JQUERY Prepending an LI to an UL with Animation

Question

I have a UL and I'm working to dynamically add a new LI to the top of the UL with some animation.

I have the following so far which works ok:

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

#container is the UL

The problem with the above is that is hides the entire UL and then slides the entire UL down and I just want the NEW LI that was prepended to animate.

Ideas? thxs

Answer 1

You can do what you want a bit easier using .prependTo() and $(html), like this:

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

You can see a demo of the above code here

.prepend() returns the element you prepended to, not the element or elements that were prepended. Switching it around to .prependTo() makes it a bit cleaner and should have the effect you want, since you can continue chaining on the elements you prepended. Also, if you're using the same string many times, this will now cache the document fragment and make it faster as well :)

One last thing, if you're doing this multiple times, make sure that ID on the <li> is unique, or you're creating invalid HTML which will have some unwanted side effects.

Answer 2

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

this should help

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

And using a basic 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();
    }
});

You can achieve godliness.