Question

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 remove 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…..

Answer 1

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