jQuery Animation Help

Question

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?

Answer 1

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

Answer 2

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.