Absolute divs doesn't fade out

i have a question for you

this is the xhtml

<div id="main">
    <div id="category1">
        <div id="product1"></div>
        <div id="product2"></div>
        <div id="product3"></div>
    </div>

    <div id="category2">
        <div id="product4"></div>
        <div id="product5"></div>
        <div id="product6"></div>
    </div>

</div>

the concept is:

• by default #container1 is shown on the website
• by clicking on the menu "container2" #container2 fades in and #container1 fades out
• i have a second level menu to select the products.. and that's the only thing that works fine.

productX are absolute positioned inside the containerX which are related positioned

the script looks fine to me, but the products divs d开发者_Go百科oesn't fade out at all!

this is the script

function controlCategory(a) {
   $("#category1").fadeOut();
                        $("#category2").fadeOut();
   $(a).fadeIn();
 }



     $(function () {

  $("#anchor1").click(function(event) {
   event.preventDefault();
   controlCSS(this);
   controlCategory("#category1");
  });

           $("#anchor2").click(function(event) {
   event.preventDefault();
   controlCSS(this);
   controlCategory("#category2");
  });

 });

does anybody know why the category divs doesn't fade out????

thanks in advance!

Update for updated question: the code you posted works, though it's a bit glitchy the fade works, you can test it here. Something outside your question (perhaps a parent is hidden?) is interfering here.

Previous answer: Your IDs don't match, you have #category1 for your selector but your elements have id="container1", so your jQuery selectors just aren't finding any elements. Just change either side so they match up.

Is the javascritpt code for the html code? In the html you have containerX ids and your javascript has categoryX ids.