Animazione Jquery

[dinoala]

Salve. ho un piccolo problema con delle animazioni tramite jquery.

praticamente ho dei DIV che voglio che compaiano e scompaiano (all'interno di un div contenitore) in base al click su un certo link.
Ci sono riuscito, ma non come vorrei...

vi posto il codice e vi spiego l'errore che vorrei risolvere:

function mostra_box1 () {
$("#box1").show("slow");
}
function nascondi_box1 () {
$("#box1").hide("slow");
}
function mostra_box2 () {
var boxaperto1 = $("#box1:hidden");
if(boxaperto1) {
nascondi_box1();
$("#box2").show("slow");
}
else {
$("#box2").show("slow");
}
}
function nascondi_box2 () {
$("#box2").hide("slow");
}


praticamente il primo div mi compare ingrandendosi dall'alto verso il basso e da sinistra verso destra...come da manuale...
il secondo div invece mi fa il controllo se il primo è aperto, nel qual caso lo chiude (come è giusto che sia) e mi compare l'altro. Bene, però mentre il primo si chiude rimpicciolendosi, il secondo si apre automaticamente DAL BASSO VERSO L'ALTO imediatamente. io vorrei che si aprisse dall'alto verso il basso dopo che il primo div si sia chiuso.
ho provato ad utilizzare load e ready ma non ho risolto. mi dareste una mano? si tratta (penso) di utilizzare una funzione temporizzatrice che aspetti che il primo box si chiuda e poi si apra il secondo. Come fare? aiutatemi please....
grazie!

[lucavizzi]

function mostra_box1 () {
	$("#box1").show("slow");
}
function nascondi_box1 (param) {
        if(param){//se viene passato un parametro
              alla conclusione della chiusura fai l'apertura
              $("#box1").hide("slow",function(){$("#box2").show("slow");});
        }else{//altrimenti
               //fai solo la chiusura
              $("#box1").hide("slow");
        }
}
function mostra_box2 () {
		var boxaperto1 = $("#box1:hidden");		
		if(boxaperto1) {
			nascondi_box1('show2Too');
	}
		else {
			$("#box2").show("slow");
		}
}
function nascondi_box2 () {
	$("#box2").hide("slow");
}

[dinoala]

Luca sei stato gentilissimo.

Dal momento che dovevo fare più box in questa maniera ho risolto (grazie a te) in una maniera credo più elegante (e corta) o comunque più facilmente gestibile per effettuare diversi controlli:

in questa maniera posso fare i controlli direttamente dentro l'apertura del box che desidero senza passare parametri vari.

function mostra_box1 () {
	$("#box1").show("slow");
}

function nascondi_box1 () {
	$("#box1").hide("slow");
	}
function mostra_box2 () {
		var boxaperto1 = $("#box1:hidden");		
		if(boxaperto1) {
			$("#box1").hide("slow",function(){$("#box2").show("slow");});
	}
		else {
			$("#box2").show("slow");
		}
}

function nascondi_box2 () {
	$("#box2").hide("slow");
}

sei stato GENTILISSIMO.

Un'ulteriore curiosità: Esiste una funzione che mi permette di aprire questi box da sinistra verso destra (o da dx verso sx) e chiuderli per come si sono aperti?
Ho visto solo le funzioni che aprono e chiudono dall'alto verso il basso e viceversa...quelle "orizzonatali" non le ho trovate....mi daresti uno spunto? graazie!!!

[lucavizzi]

Per personalizzare le animazioni c'è animate().
http://api.jquery.com/animate/

Puoi semplificare ulteriormente lo script usando toggle()
http://api.jquery.com/toggle/
e passando alla funzione l'id del box.

[dinoala]

ok grazie. in realtà il toggle non penso di poterlo utilizzare perchè stavo facendo un "mini sito" con un "mini menu".
una pagina soltanto con 3 o 4 div contenitori che sono in dispaly:none all'inizio. cliccando sulle voci del menu abilito questi div e li mostro uno per ogni voce del menu...

la soluzione toggle mi sembra che non mi permetta di poter fare i controlli incrociati, ovvero se c'è il box 1 aperto ed io voglio aprire il box 3 ed utilizzo la funzione toggle lo posso fare?

mi è sembrato di capire dalle lezioni di html.it che il toggle si riferisce soltanto ad un elemento che passo come id. La soluzione forse potrebbe essere quella di passare un funzione come paramentro come hai fatto tu al massimo. no?

[lucavizzi]

Non hai bisogno di controllare che il tale box sia aperto, puoi chiuderlo a prescindere.

function showBox(id){
    $('#box1,#box2').hide('slow',function(){$('#'+id).show('slow');});
    //in alternativa, se i div sono più di due, puoi assegnare una classe che li "raggruppi"
    //$('div.groupClass').hide('slow',function(){$('#'+id).show('slow');});
}

<body>
<input type="button" onclick="showBox('box1')" value="Apri box 1" />
<input type="button" onclick="showBox('box2')" value="Apri box 2" />
</body>

[dinoala]

il codice da te postato da qualche problema. praticamente i quando chiudo il div cliccando una seconda volta sul tasto del menu mi si riapre immediatamente lo stesso (ed invece non dovrebbe fare nulla) e quando apro il secondo box me lo apre sotto e non va a sostituire il primo (che resta sempre aperto)

Per quel che riguarda la classe dei box in realtà me ne servono più di 2, ogni box contiene del testo diverso da ogni altro (chiaramente) quindi non credo di poter fare una classe .box, infatti creavo gli id #box1 ... #boxN così da poter inserire dentro ciò che voglio senza alcun problema di conflitti. Come dicevo prima si troverà tutto in un unica pagina html.

<div id="center">
        	<a id="menu" onclick="mostra_box('box1');" class="testo">mostra box 1</a> 
                <a id="menu" onclick="mostra_box('box2');" class="testo">mostra box 2</a>
                <a id="menu" onclick="mostra_box('box1');" class="testo">mostra box 3</a>  
</div>
<div id="right">
             <div id="box1"> testo e strucchioli vari del primo box</div>  
             <div id="box2"> testo e strucchioli vari del secondo box</div>
             <div id="box3"> testo e strucchioli vari del terzo box</div>   
</div>

lo stato iniziale dei box (impostato come css) è display:none ma, come vedi, nella pagina in realtà già è presente il div, solo che non si vede.

Ho scelto questa soluzione perchè ho sempre avuto il dubbio (penso confermato) che i ltesto generato da javascript non venisse indicizzato, quindi io, onde evitare questo problema, il testo l oscrivo direttamente nel file html cosi viene letto dagli spider.

come potrei ottenere questo tanto agognato effetto che tanto desidero? non ho ancora preso bene la mano con jquery....

[dinoala]

ecco la logica dovrebbe essere questa, ma non mi funge!!!

function mostra_box(id) {
		var boxaperto = $("div[id^='box']");  //prendo quel div che è "aperto" ed il cui ID cominci con "box"...sia essi box1 box2 o box ennesimo
		if(boxaperto || "#"+boxaperto!=id)	{  //se c'è un box aperto e queto boxaperto è diverso dall'id che passo come parametro esegui la linea di codice
			$("div[id^='box']").hide("slow",function(){$(id).show("slow");});
		}
		else {	//altrimenti sono il primo box ad essere aperto e non devo fare controlli
			$(id).show("slow");
		}
}

come lo risolvo?

[lucavizzi]

Originariamente inviato da dinoala
il codice da te postato da qualche problema. praticamente i quando chiudo il div cliccando una seconda volta sul tasto del menu mi si riapre immediatamente lo stesso (ed invece non dovrebbe fare nulla) e quando apro il secondo box me lo apre sotto e non va a sostituire il primo (che resta sempre aperto)

Ovviamente lo devi adattare alle tue esigenze ed al tuo DOM.

Originariamente inviato da dinoala
Per quel che riguarda la classe dei box in realtà me ne servono più di 2, ogni box contiene del testo diverso da ogni altro (chiaramente) quindi non credo di poter fare una classe .box, infatti creavo gli id #box1 ... #boxN così da poter inserire dentro ciò che voglio senza alcun problema di conflitti. Come dicevo prima si troverà tutto in un unica pagina html.

La classe la puoi utilizzare col solo scopo di referenziare un gruppo di tag, non devi necessariamente usarla per la formattazione, anche se, secondo me, sarebbe consigliabile.

Originariamente inviato da dinoala

<div id="center">
        	<a id="menu" onclick="mostra_box('box1');" class="testo">mostra box 1</a> 
                <a id="menu" onclick="mostra_box('box2');" class="testo">mostra box 2</a>
                <a id="menu" onclick="mostra_box('box1');" class="testo">mostra box 3</a>  
</div>
<div id="right">
             <div id="box1"> testo e strucchioli vari del primo box</div>  
             <div id="box2"> testo e strucchioli vari del secondo box</div>
             <div id="box3"> testo e strucchioli vari del terzo box</div>   
</div>

nel terzo link passi come parametro l'id del primo box.

[dinoala]

si si... quell'id del primo box è frutto di un copia incolla tra i tag CODE del forum...in realtà ne esistono 5 di questi div, avevo semplicemente fatto un copia incolla ed avevo dimenticato a modificarlo.

riguardo all'ultima funzione che ho postata, è un metodo sbagliato per l'approccio?

non capisco perchè la riga di codice: var boxaperto = $("div[id^='box']");
se la faccio seguire da un alert che mi mostra il valore di boxaperto mi dice soltanto [object Object] quindi in realtà non mi ritorna l'id che vorrei. come posso fare ritornare l'id in maniera pulita cosi lo passo alla $ per utilizzarlo con .hide?