CODEWITHSUNDEEP
jqueryanimation
The.Anti.9
The.Anti.9

Reputation: 44648

jQuery Animation Help

I have a dynamic amount of div's being returned from a query, all with the class #li. I want them all to fade in smoothly instead of just appear. So far I'm using this code:

function loadTables() {
                $.get("display.php", { server: Server, username: Username, password: Password, database: Database, content: "tables" },
                    function(data){
                        html = ''
                        $(data).find("table").each(function() {
                            html = html + "<div id='li'>" + $(this).text() + "</div>";
                            });
                        $('#content').html(html);
                        $('#li').hide();
                        $('#li').fadeIn('slow');
                    }
                );
            }

But the problem is, the animation only works on the first div. It animates in just fine. But all the rest just appear. The docs on jQuery.com say that it does this for all matching elements, but, it doesnt appear to be doing so. How can I fix this?

Upvotes: 0

Views: 194

Answers (2)

Energiequant
Energiequant

Reputation: 889

IDs in XML/HTML are meant to be unique. You should change id to class and then call $(".li") instead if $("#li"). jQuery most likely stops on the first occurence since this is standard.

Upvotes: 2

Kobi
Kobi

Reputation: 138017

You cannot have the same id for multiple elements.
Try replacing id with class.

Upvotes: 3

Related Questions