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

Beverlybevers

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.

Duo

thanks I'm always interested in doing things right. I tried you suggestion, problem is it still is slideDown'ing the entire UL not just the new LI. Ideas? – Beverlybevers

@nobosh - Seems like extra or old code is running as well, you have an example page? You can see a demo of the answer code here: jsfiddle.net/KAGDu Also...are you sure the <ul> isn't just moving to make room for that sliding <li>? It has to go somewhere :) – Duo

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.

Sherylsheryle