Question

I know this code is super lame but it was working very well ’till now so I kept it.
But now I have too many < li >’s and I can’t add them manually in the js because it’s on wordpress and it depends on the category page so the number of < li >’s changes every time.

My question is; how can I keep that animation and make it work with an undefined number of < li >’s without having to add them manually? And is there a way to stop the scroll bar scrolling-away without using the css overflow-y: hidden ?!

HERE’S THE DEMO:
http://jsfiddle.net/NdRDh/

Thank you very much! Hope you can help me!!

Tom

Answer 1

I’d suggest:

$(document).ready(
    function() {
        $('li').each(
            function(i) {
                $(this)
                    .delay(400)
                    .animate(
                        {
                            'top' : '10px'
                        }, 1500 + (500*i));
            });
    });​

JS Fiddle demo.

Oh, and please note that you’re repeating the same id for all of your li elements: this is invalid HTML, as:

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

_{(Quoted from: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)}

References:

• each().