JQuery loading content - slide content in RIGHT/LEFT ???!!!

Hej! Jag har ett jätteknepigt problem...är rätt ny i programmeringsvärlden..

Ja försöker skapa ett navigeringssystem där när man klickar på en länk så kommer d upp en snabb "loading bild" medan content skjuts ut och när den gjort det "slidar" det nya innehållet in.

exempel finns på sidan:

www.coty.com

Hur får jag till det? Jag har använt mig av en tutorial men den använde slideUp & slideDown vilket gjorde så att det bara gick upp eller ner, inte åt sidorna: http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in... . Jag har provat att ersätta content.slideUp etc. i den koden till ist loading.animate ({ width: 720}); osv men det gör bara så att innehållet skjuts ut åt sidan och sedan DROPPAR ner (hoppas ni förstår vad jag menar), vilket gör att det ser jättefult ut...jag vill nämligen att det ska se ut precis som på hemsidan nämnd ovan: www.coty.com

Finns det någon snäll själ som kan hjälpa mig skulle jag bli SÅÅÅ tacksam! har försökt i flera veckor nu !!

TACK!

hmmmm...okej, ja klistrar in koden så får ni se hur det är upplagt:

$(document).ready(function(){
	//References
	var sections = $("#menu li");
	var loading = $("#loading");
	var content = $("#coreContent");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		switch(this.id){
			case "home":
                                loading.animate({ width: 700 });
                                content.load("sections.html #section_home", hideLoading);
                                loading.animate({ width: 32 });
				break;
			case "about":
				loading.animate({ width: 700 });
				content.load("sections.html #section_about", hideLoading);
                                loading.animate({ width: 32 });
				break;
			case "link":
				loading.animate({ width: 700 });
				content.load("sections.html #section_link", hideLoading);
                                loading.animate({ width: 32 });
				break;
			case "external":
				loading.animate({ width: 700 });
				content.load("external.html", hideLoading);
				loading.animate({ width: 32 });
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Min layout är alltså uppbyggd av en container som håller ihop hela sidan, en coreContent som är just innehållet som jag vill ska täckas/slidas, en enkel vertikal navigationsmeny på vänster sida som är menu li och slutligen en loading, som i princip är en gömd div med en bild som jag vill ska slidas ut o försöka täcka/gömma innehållet tills det nya laddas upp och slidas ut.

Så Basti (eller ni andra), tror du du skulle kunna visa i min kod hur du menade?

TACK SÅ MYCKET FÖR SNABBT SVAR !!

yes, jag lägger upp inloggning till sidan ikväll. är inte hemm just nu.

Så! för att logga in och se siten:

http://www.morematches.net/wp-admin

User: sweclocker
Pass: password1

När ni kommit in, tryck bara på morematches.net högst upp till vänster, så ser ni sajten...(använder alltså wordpress)

Tack !!!

ja ska prova! säger till

hmmm...nee det funkade inte. logga in o kolla, har lagt upp koden för just "home" länken. hmmm??

såhär ser min kod ut just nu:

$(document).ready(function(){
	//References
	var sections = $("#menu li");
	var loading = $("#loading");
	var content = $("#coreContent");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		switch(this.id){
			case "home":
                content.fadeOut(300, function(){
                    loading.animate({ width: 700 }, 600);
				});
				content.load("sections.html #section_home", hideLoading);
				loading.delay(1200).animate({ width: 32 }, 600, function(){
					content.fadeIn(300);
				});
				break;
			case "about":
				loading.animate({ width: 700 });
				content.load("sections.html #section_about", hideLoading);
                loading.animate({ width: 32 });
				break;
			case "link":
				loading.animate({ width: 700 });
				content.load("sections.html #section_link", hideLoading);
                loading.animate({ width: 32 });
				break;
			case "external":
				loading.animate({ width: 700 });
				content.load("external.html", hideLoading);
				loading.animate({ width: 32 });
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

la in den koden också, det är samma sak fortf...på firefox droppar innehållet ner, o på chrome kommer bara loading-bilden ut, o sen försvinner den, och det stannar så

och på safari går det inte o klicka på länkarna överhuvudtaget :S

tack! ja ska sätta in det i hemsidan och prova! hur ska jag synka ihop den med länkarna?

ska ja skriva såhär eller hur gör jag:

$("#content")
.fadeIn(300)
.load("sections.html #section_home");

ok! ska ja sätta javascript länken i footern på index? Alltså <script type="text/jacascript">...

sorry för alla frågor! Tack för all hjälp ja provar det ikväll så får vi se !:)

har satt upp sidan nu, gjorde om från wordpress till enkel html ist

tack så mkt!

http://morematches.net/site

Aa, ja satte bredden på 1000 px, majoriteten av användarna har ju inte bredden mindre än så?

I annat fall, hur bör jag ändra det tkr du?

Om laddningssnurran, d e bara ett test nu (animationen är rätt hackig jag ska göra om den). Anledningen till att det är en laddningssnurran uppe (som coty.com) så är det för att de jag gör sidan till ville ha det som "effekt" då de gillade det hos coty.com.

Tack för feedback