jquery show/hide contenuto in un div con effetto fade

[blekm]

vorrei creare un menu di 4 voci con sotto un div con i contenuti. Ad ogni click deve scomparire l'attuale contenuto del div con effetto fadeout e apparire l'altro con fadein..

ho cercato su google, ma trovo solo fadein/out, senza replace del contenuto.

conoscete qualcosa che possa far al caso mio?

[-AA-]

http://nettuts.s3.cdn.plus.org/011_j...ple/index.html

[blekm]

ma come funziona 'sto sito, non riesco a capire da dove carichi i contenuti delle varie sezioni :master:

[-AA-]

i contenuti sono caricati da "file esterni" e vengono richiamati dentro il DIV content strutturalmente è semplice ma l'effetto è molto bello

[blekm]

Originariamente inviato da -AA-
i contenuti sono caricati da "file esterni" e vengono richiamati dentro il DIV content strutturalmente è semplice ma l'effetto è molto bello

ma dove vengono fatte queste chiamate? dove sono i file esterni? è questo che non vedo

[-AA-]

Menu di navigazione con relativi URL di file "esterni"

    <ul id="nav">[*]welcome[*]about[*]portfolio[*]contact[*]terms[/list]

DIV relativo al "cambio contenuti"

    <div id="content">
        <h2>Portfolio</h2>
        

[img]images/flame.jpg[/img]Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis. </p>
    </div>

JS con la classe relativa al tag UL con ID nav
<script type="text/javascript" src="js.js"></script>


contenuto del file JS

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('#nav li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #content';
			$('#content').load(toLoad)
		}											
	});

	$('#nav li a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('fast',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
		
	});

});

come puoi ben vedere la struttura è molto semplice e non necessita di ulteriori spiegazioni, il menu come il content possono essere gestiti ed adattati a qualsiasi tipo di layout

[blekm]

che fagiano, era li in evidenza e non l'avevo notato

grazie

[skiokko2]

Salve, qualcuno di voi saprebbe dirmi come modificare lo script in modo che gli effetti fade out e fade in siano contermporanei, cioè che mentre un contenuto se ne va in dissolvenza l'altro comincia ad arrivare piuttosto che aspettare che l'altro se ne sia andato ? Altrimenti così per un attivo il div si svuota e si vede lo sfondo...

Grazie

[knight2007]

il problema è che se metti dello script all'intenro di una delle pagine, l'effetto di transizione non funge più....

[skiokko2]

se questa è la risposta alla mia domanda non ho capito, perchè dovrei mettere lo script dentro la pagina ? volevo solo sapere come modificare lo script (che carica esternamente) per fargli fare gli effetti contemporaneamente...

Grazie