Jquery help (finestra a scomparsa)

[ivanisevic82]

Ciao ragazzi, vorrei creare per il mio sito un effetto tipo quello di cui si parla al punto 2 di questa guida:

http://www.webdesignerwall.com/tutor...for-designers/

Solo che oltre all'effetto a scomparsa con dissolvenza, vorrei aggiungerne uno anche a "comparsa", identico ma che faccia apparire il riquadro.

Inoltre vorrei riuscire a fare funzionare il tutto, mi servirebbe un esempio concreto ma nella guida non c'è.
Lì spiegano solo come fare lo script...io l'ho creato, caricato sul mio spazio web e ho inserito opportunamente la riga tra i tag head.

Ho delle difficoltà ad inserire il resto della parte html e css rispettivamente nel body e nel foglio di stile.

Qualcuno ha 2 minuti per farmi un esempio concreto di come potrei fare?

Grazie!

[ivanisevic82]

Up...

[ivanisevic82]

Allora, vi spiego meglio qual'è il problema, così vediamo se potete aiutarmi più concretamente.

L'effetto che voglio creare è quello di una finestra (posizionata assolutamente) che appare (clickando su un bottone) con effetto fade-in e scompare (clickando su una "X") con effetto fade-off.

- Ora, la prima parte (clickare su un oggetto e far comparire un div con effetto fade-in) sono riuscito a farla tramite questo script che ho creato:

$(document).ready(function(){

	$(".Pulsante").click(function(){
	  $("#Riquadro").animate({ opacity: "show" }, "slow");
          $(this).showClass("active");
	});

});

- La seconda parte (clickare su una "X" -come quella che fa chiudere le finestre in windows- posizionata all'interno della "finestra" che fa da sfondo al div, in modo che il div si chiuda con effetto fade-out) non sono riuscito a farla.


Forse i due script vanno fusi in uno solo o combinati in qualche modo...

Potete aiutarmi?

[ivanisevic82]

Scusate se mi faccio il topic da solo, ma ho fatto un passo avanti, quindi vi aggiorno in modo da evitare perdite di tempo.

Sto usando questi 2 script:

Per fare apparire la finestra ("Riquadro")

$(document).ready(function(){

	$(".Pulsante").click(function(){
	  $("#Riquadro").animate({ opacity: "show" }, "slow");
          $(this).showClass("active");
	});

});

e per farla sparire

$(document).ready(function(){

	$(".link-delete").click(function(){
	  $("#Riquadro").animate({ opacity: "hide" }, "slow");
          $(this).showClass("active");
	});

});

Nel body ho inserito questo:

<div id="Riquadro">TESTO</div>
<p class="show">Apri</p>
<p class="hide">Chiudi</p>

Dunque quando clicco su "Apri" mi appare la finestra (il div "Riquadro") e quando clicco su "Chiudi", mi si chiude...

L'unico problema è il seguente: io non voglio che "Chiudi" sia sempre visualizzabile, ma vorrei che fosse scritto dentro il div "Riquadro" (che appare solo dopo aver clickato su "Apri").

Com'è possibile fare una cosa del genere?

Grazie!

[ivanisevic82]

Scusate ragazzi, ce l'ho fatta da solo!
Bastava inserire il comando "chiudi" dentro il div "Riquadro"!

Grazie lo stesso!