Als een bezoeker van een pagina op een link klikt is er een fade out:

Code:

$("a.link").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(1000, nieuwePagina);        
});

function nieuwePagina() {
    window.location = linkLocation;
}

Vervolgens wordt de nieuwe pagina geladen met een fade in. Het idee is om de overgang naadloos te maken, maar hoe doe ik dit? De fade in en out werkt, maar er verschijnt kort een witte achtergrond bij de wisseling van de ene naar de andere pagina. Ik dacht eerst aan een Ajax-oplossing, maar dan wordt content van de andere pagina geladen op de huidige pagina. En wordt de bezoeker niet doorgestuurd naar de nieuwe pagina.
Is er een manier om de overgang naadloos te maken?

Naadloos.... nope. Fade out gaat prima, fade in ook, maar.... naadloos zou beteken dat er een laadtijd van 0.0 sec zou moeten zijn; dat gaat nog niet al had je je pc direct op een internetknooppunt aangesloten.

Naadloos gaat je inderdaad niet lukken. Als je dat resultaat wilt bereiken moet je de oplossing gebruiken die je zelf ook al beschrijft: je content veranderen mbv Ajax.

Het is inderdaad helaas niet mogelijk ben ik achter gekomen. Wel kwam ik een soort oplossing tegen op http://rosspenman.com/pushstate-jquery/
Het is kennelijk mogelijk om elementen van de browser aan te passen. Als een pagina laadt kun je de titel aanpassen, maar ook de url in de adresbalk en de Terug-knop. Waardoor het voor de gebruiker of een nieuwe pagina wordt geladen. Met AJAX kun je de nieuwe content laden.

Origineel gepost door R. Kronshorst

Het is inderdaad helaas niet mogelijk ben ik achter gekomen. Wel kwam ik een soort oplossing tegen op http://rosspenman.com/pushstate-jquery/
Het is kennelijk mogelijk om elementen van de browser aan te passen. Als een pagina laadt kun je de titel aanpassen, maar ook de url in de adresbalk en de Terug-knop. Waardoor het voor de gebruiker of een nieuwe pagina wordt geladen. Met AJAX kun je de nieuwe content laden.

Jawel, je kunt het wel met jQuery. Je kunt dit doen met de functie .load()

Voorbeeld:
$("#dedivdiejewiltvervangen").fadeOut().load("/de-nieuwe-pagina #dedivdievervangendis").fadeIn('fast')

In plaats van de ID die je meegeeft, kun je denk ik ook de body gebruiken hiervoor. Je zult hier even mee moeten spelen.

Wat voor type website is het? Is er veel content? Gaat het om een webshop etc.?

Dit zijn best wel belangrijke vragen om tot een goede oplossing te komen. Je kan bijvoorbeeld best veel cachen maar een soort "one-page" idee maken. Ook daarbij geldt weer, hoe belangerijk is SEO in dit verhaal?

Vertel eens wat meer over je project dan kunnen we goed zien wat erbij past!

@Giovanni, er zit een fractie van een seconde bij het laden van een nieuwe pagina. Die wordt pas geladen als de fade out voorbij is. Hierdoor zie je heel even een wit scherm, waarna de nieuwe pagina met een fade in wordt geladen. Dat witte scherm kun je denk ik alleen voorkomen door in de cache de nieuwe pagina te laden.

@Arno, het gaat om een website met een stuk of 20 pagina's met op sommige flink wat tekst en afbeeldingen. Een onepager is een goed idee, maar ik denk dat de laadtijd te groot wordt.
Ik zat meer te denken aan het compressen van de pagina's, de cache van de webserver te optimaliseren en zo de grootte van de pagina's te verkleinen.

Ik heb verschillende websites die compleet via ajax laden (zoals jij het wil).
Het is alleen heel wat werk om op te zetten. Ik weet niet hoe belangrijk dat effectje voor je is anders kan ik het principe wel voor je uitleggen.
Maar laten we zeggen: kwa uren/kosten is het het niet waard om zoveel tijd in een fade effectje te stoppen.
Ik heb het gemaakt omdat ik het een uitdaging vond. :)

Dat is het voor mij ook Wilbert ;-)
Het werkt nu met drie pagina's met alleen maar tekst. Ik ben benieuwd hoe dat straks met grotere pagina's gaat en andere javascripts. Ik verwacht nog wat tegenslagen. Maar als het werkt zou wel mooi zijn.

Heb je een link dan kan ik je misschien wat tips geven.
(Ik had een hele JS fiddle gemaakt die werkte. Druk ik op "Save" alles weg :P)