JQuery <Li> Slide Up animation

I'm trying to slide individual <li> elements within a <ul> up, but the effect I get is similar to a 'blinds' animation instead of sliding all the way up.

Here's a look at my current code: http://jsfiddle.net/VpApX/

I've also tried sliding the entire UL up, which gives me the scroll effect I'm looking for but there is a jerk at the end of the animation that I can't get rid of.

How can I get the elements to slide all the way up or remov开发者_开发百科e the jerk that is happening when I slide the entire ul?

Edit

http://jsfiddle.net/VpApX/4/ The animation when you click 'Test Ul' is what I was going for, for some reason I'm not getting the jerky when the animation finishes anymore though which solves my problem. I somehow fixed it copying it into jsfiddle.....

---

The jerk you're experiencing is a fairly well-known bug that occurs when using jQuery's slide methods on an element that doesn't have a defined height. I assume you don't want to set a defined height, because that would always need to change whenever the style changes or you decide to let more than 4 items be visible in the list at a time. The solution is to set the height using JS when the DOM is ready:

$(function(){
    var ul = $('ul');
    ul.height(ul.height()); //the ul element now has an inline style equal to the height the browser originally had to compute
});

---

The above answer is correct about the cause but the example sets ALL the ULs to have the same height. If you have different amounts of content you'll need to iterate through them like this:

$(function(){
    $('ul').each(function(){
        $(this).height($(this).height());
    });
});