Jquery Li Image Gallery

Problem

How would I hide all li from a ul which were not the one on top.

Code: http://jsfiddle.net/mSmbv/375/

I need the li at the top to be the only one hidden. All others should be hidden until they slide up into view and the top slide to the bottom.

Edit: I've gotten to the point where I can have them slide in and out but I would prefer a nice looking fade in/out where both current nad next li fade into each other. http://jsfiddle.net/mSmbv/386/

Problem courtesy of: MCG

Solution

Using your current code, I'd employ using the CSS3 selector.

#rotated li
{
    display: none;
}

#rotated li:nth-child(1)
{
    display: list-item;
}

I would try something along those lines. You can also use jQuery to transition your CSS effects in and out of existence. Worst case you can iterate through the collection of LIs by specifying an !important CSS class that forces display and the style you're looking for.

Good luck!

Solution courtesy of: jamesbar2

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.