CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tom
Tom

Reputation: 13

jQuery animation for an unknown number of <li>'s

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

Upvotes: 1

Views: 103

Answers (5)

David Thomas
David Thomas

Reputation: 253456

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:

Upvotes: 4

jeff
jeff

Reputation: 8348

Try this:

$("li").each(function(index) {
    $(this).delay(400).animate({'top' : '10px'}), 1000 + 500 * index);
});

Upvotes: 0

bokonic
bokonic

Reputation: 1771

You have id and class swapped: give them 'common' as the class and their class names as id's and then you can select them all and call animate with:

 $('li.common').animate(...);

Upvotes: 1

ayyp
ayyp

Reputation: 6608

You can use each(), as shown here: http://jsfiddle.net/Skooljester/NdRDh/1/

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

example fiddle: http://jsfiddle.net/NdRDh/6/

as a sidenote you cannot have multiple elements with the same id

Upvotes: 3

Related Questions