Animazione sfalsata jquery

[giuliox]

Buongiorno e buon Natale a tutti voi.
Avrei un piccolo problema con Jquery. Ho una sorta di menu che al al click delle varie ancore mi dovrebbe far comparire un div piuttosto che un altro.
Ovviamente ho utulizzato JQuery ma in base a quale ancora clicco mi da un effetto strano, diverso.

function mostra_box(id){
    $('div.box').hide('slow',function(){$('#'+id).show("slow");});
}

il css invece

.box{ width:200px; height:200px; position:relative; background-color:#A35; display:none;}

e l'html ridotto all'osso

    </div>
        <div id="center">
            <a id="menu" onclick="mostra_box('box1');" class="testo"><strong>mostra box 1</strong></a> 
            <a id="menu" onclick="mostra_box('box2');" class="testo"><strong>mostra box 2</strong></a>
            <a id="menu" onclick="mostra_box('box3');" class="testo"><strong>mostra box 3</strong></a> 
            <a id="menu" onclick="mostra_box('box4');" class="testo"><strong>mostra box 4</strong></a>
        </div>
    <div id="right">
      <div id="box1" class="box">BOX 1</div>  
      <div id="box2" class="box">BOX 2</div>
      <div id="box3" class="box">BOX 3</div> 
      <div id="box4" class="box">BOX 4</div> 
    </div>

Effettivamente hide e show funzionano, hide mi nasconde il box dall'alto verso il basso e show, nel caso del primo box, mi compara dall'alto verso il basso, invece per gli altri box mi da l'effetto simultaneo di chiusura ed apertura, nel senso che mentre si chiude il box X dal basso verso l'alto, mi si apre il box Y dal basso verso l'alto e quindi non aspetta che termini l'hide prima di fare lo show. Ho provato con il toggle ma non riesco a gestire gli ID.
Nel caso del box 3 e 4 mi fa invece 2 volta l'apertura e la chiusura del box. È stranissimo, mi dareste una mano?
Grazie

[artasdog]

Hai provato a usare .Delay() ?

[giuliox]

Ciao artasdog, si in realtà ho usato pure delay però non mi funzinoava...

Alla fine ho scoperto che la mia versione di JQuery non supportava il delay e l'ho aggiornata. ho quindi risolto tutto tranne per un piccolo dettaglio:

function mostra_box(id){
        $('.box').hide(500);
        $('#'+id).delay(500).show(1500);
}

in questa maniera risolvo temporizzando l'hide ed il delay però sta brutto che quando devo aprire il primo box mi passa mezzo secondo dal click del mouse. Non sono riuscito a creare una funzioncina che mi controlli se il box è il primo ad essere aperto ed in qual caso fare direttamente lo show. Se invece NON è il primo ad essere aperto allora mi fa il giochetto dei ritardi.

Sapresti darmi uno spunto per creare questa funzione? Grazie e buon anno a tutto il forum

[artasdog]

Non ho capito completemente il tutto, comunque hai provato a verificare la proprietà display dei css così:

if($("#nomeselettore").css("display"))=="block"){
paperino
}else{
pluto
}

ed in base al risultato gestire la cosa.

[giuliox]

Esatto è la prima versione dell'algoritmo di controllo che ho fatto. Avevo circa 5 o 6 if/esle che mi facevano il controllo però anziccheè utilizzare il .css utilizzavo il .attr('display')=='hidden' oppure 'none'. Qual'è la differenza?

Anche in questo caso mi faceva il controllo esatto e lavorava bene soltanto per alcuni box, per altri aveva un comportamento strano del tipo che apriva e chiudeva 2 volte lo stesso box nonostante avessi controllato mille volte il codice ed accertarmi che fosse uguale al codice dei box che avevano un comportamento corretto.

Se avessi una serie lunga di elementi di div da far s/comparire sarebbe una bella rottura fare tutti questi controlli con gli ID, infatti poi ho utilizzato la soluzione CLASSE ed ID in combinazione per facilitare la situazione. In questa maniera utilizzavo pure un FOR per cercare gli elementi di tipo class="box" ma non ci sono riuscito!!!

è una bella rottura. Mi stavo quasi per rassegnare prima che mi rispondessi!!!!


ps: cosa non ti era chiaro esattamente del mio problema?

[artasdog]

In generale comunque ti consiglio di fare il debug con la console di firebug e seguire passo passo tutto quello che succede, in quel modo non si possono non capire i passaggi.
Una cosa del genere:
"aveva un comportamento strano del tipo che apriva e chiudeva 2 volte lo stesso box"
se fai il debug capisci subito il perchè.
Se ti serve un aiuto preciso per qualche punto della cosa linka la risorsa in modo che si possa ispezionarla, così è più facile.

[giuliox]

non conoscevo affatto questo firebug... lo utilizzerò e vi farò sapere. Sicuramente lo strumento mi sarà essenziale. Grazie per il tempo dedicatomi!!!

[artasdog]

Vedrai, farai un passo avanti enorme ora che lo conosci, a volte penso che certi programmi o utility sono talmente utili che la gente tende e non parlarne per tenersi un piccolo vantaggio.