Problema con fadeIn e fadeOut

[gandalf1959]

Buongiorno a tutti.
Sto completando un piccolo sito per uno studio di commercialisti composto da un header, un corpo centrale e un footer.
Le voci del menu sono 4: "lo studio", "aree di attivita", "chi siamo", "contatti".
Il corpo centrale e' un div con id=contenuti che a sua volta contiene (al caricamento del sito) un div con id=studio.
Cliccando su "aree di attivita" il div studio scompare con un fadeOut e al suo posto compare il div con id=attivita.

E fin qui tutto bene. Ora devo fare in modo che cliccando sul bottone "lo studio", il div "attivita" scompaia con il fadeOut e al suo posto si visualizzi nuovamente il div "studio" con il suo fadeIn.
Pero' non mi funziona.
Questo e' l'html dei div bottoni:

<div id="menu">
            <div id="lostudio" class="bottonemenu">LO STUDIO</div>
            <div id="aree" class="bottonemenu">AREE DI ATTIVITA'</div></a>
            <div class="bottonemenu">CHI SIAMO</div>
            <div class="bottoneultimo">CONTATTI</div>    
</div>

I div "studio" e "attivita":

<div id="studio" style="display:block">.....</div>
<div id="attivita" style="display:none">.....</div>

lo script:

$(document).ready(function() {
  var divstudio = document.getElementById("studio");
  var divattivita = document.getElementById("attivita");

  //CLICK SU AREE DI ATTIVITA (funziona)
    $("#aree").click(function() {

      if(divstudio.style.display == "block") {
        $("#studio").fadeOut('slow', appareattivita);
      }

    });

    //CLICK SU LO STUDIO (non funziona)
    $("#lostudio").click(function() {

      if(divattivita.style.display == "block") {
        $("#attivita").fadeOut('slow', apparestudio);
      }

    });



});



function appareattivita() {
  $("#attivita").fadeIn('slow');
}

function apparestudio() {
  $("#studio").fadeIn('slow');
}

Naturalmente poi replichero' gli IF appena avro' pronti anche gli ultimi due div "chi siamo" e "contatti".
Ma perche' quando clicco su "lo studio" non succede nulla?

Grazie per l'aiuto

 

[criric]

CIao, probabilmente perchè essendo nascosto il div questa variabile non prende valore

var divattivita = document.getElementById("attivita");

Io fossi in te proverei qualcosa di più dinamico tipo questo

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>    
    $(document).ready(function() {
        $("#menu div").click(function(){
            var i = $(this).index();
            $("div.contenuto").not(":eq(" + i + ")").fadeOut('slow',function(){
                $("div#box" + i).fadeIn('slow');
            });
        });
    });    
</script> 
<style>
    #menu div {
        width: 200px;
        text-align: center;
        padding:5px 0;
        float:left;
        margin:10px;
        border:1px solid blue;
        cursor:pointer;
    }
    .contenuto {
        clear: both;
        width: 870px;
        height: 500px;
        line-height: 500px;
        background-color: #E4E4E4;
        margin:10px;
    }
</style>
<div id="menu">
    <div class="bottonemenu">LO STUDIO</div>
    <div class="bottonemenu">AREE DI ATTIVITA'</div>
    <div class="bottonemenu">CHI SIAMO</div>
    <div class="bottoneultimo">CONTATTI</div>    
</div>
<div id="box0" class="contenuto" style="display:block">..... studio </div>
<div id="box1" class="contenuto" style="display:none">..... aree </div>
<div id="box2" class="contenuto" style="display:none">..... chi siamo</div>
<div id="box3" class="contenuto" style="display:none">..... contact</div>

Ho aggiunto n po di css, giusto per vedere l'effetto, se ci lavori un pò potrebbe uscirne qualcosa di valido.

 

[gandalf1959]

Grazie per il suggerimento.
Ci lavoro su un po' e poi ti faccio sapere. Ho capito il concetto, ora cerco di adattarlo al mio sito.
A presto