Hi,
ich habe eine Seite gebaut in HTML und CSS. Die Grundstruktur auf jeder Seite ist mehr oder weniger gleich, lediglich der Inhalt ändert sich. Auf jeden Fall möchte ich ausprobieren, einen Seitenwechsel ein wenig zu animieren. Mit animieren meine ich lediglich (alles innerhalb 1 Sekunde ungefähr) die jetzige Seite kurz ausblenden und eine andere dann einblenden. Insgesamt habe ich nur 4 Seiten, so dass dies wahrtscheinlich nicht zu nervig wird. Es soll eben auch kaum auffallen, aber man soll merken, dass es ein wenig animiert ist.

Nun ja, ich habe gesucht und ein wenig rumprobiert. Die neue Seite laden habe ich hinbekommen mit jQuery:

Code :

1 2 3

$(function(){     $('#container').hide().fadeIn(); })

Dies funktioniert auch. Das Ausfaden der anderen Seite bei Klick auf einen der 4 Navigationspunkte ( ul li a), schaffe ich leider nicht. Die jQuery Funktion dafür sollte sein

Code :

1	$('#container').fadeOut();

Nur leider weiß ich nicht, wie ich diese Funktion genau dann ausführe, wenn man auf einem Link klickt (muss ich dem a tag eine id geben?). Außerdem muss nachdem die Seite ausgefadet ist, erst dann der Seitenwechsel erfolgen. Dies geht wahrscheinlich mit der load Eigenschaft

Code :

1	.load('neueSeite.html');

Allerdings bekomme ich dies nicht zusammengestückelt, weil ich nicht weiß, wie man herausfindet ob geklickt wurde und wo (4 Links führen zu unterschiedlichen inhalten).

Zusammengefasst will ich zurst die aktuelle Seite ausfaden, neue Seite aufrufen, neue Seite einfaden. Einfaden klappt mehr oder weniger, beim Rest weiß mich grad nicht weiter. So habe ich es auch schon versucht...

Code :

1 2 3

$('#container').fadeOut(1000, function() {      $this.load('tactics.html'); });

Hi,

vielleicht kannst du den fadeout beim unload() machen:

Code :

1 2 3

$(window).unload(function() {   $('#container').fadeOut(); });

oder du fängst den onclick auf und leitest nach dem Fade um:

Code :

1 2 3 4

#('#link').click(function() {   $('#container').fadeOut();   window.location="bla.html"; });

Alles nicht getestet, sollte allerdings so funktionieren.

Grüße

Hab alles probiert aber keine Lösung geht. Mein Code sieht so aus:

$(function(){
$('#content_right').hide().fadeIn();
})

$('.link').click(function() {
$('#container').fadeOut();
window.location="bla.html";
});

$(window).unload(function() {
$('#container').fadeOut();
});

<a class="link" href=""><img src="http://www.tutorials.de/images/subnav_verteidigung.png" /></a>

Weiterleiten auf bla.html macht er auch nicht. Der fadein geht allerdings weiterhin

Ist so etwas denn nicht möglich oder nur schwer? Ich habe bereits gesucht, aber bisher nichts passendes gefunden, aber dadurch dass es fadeIn und fadeOut schon gibt, stell ich mir das nicht so schwer vor. Leider bekomme ich es ohne Hilfe aber nicht wirklich hin. Problem besteht für mich immer noch beim FadeOut, da ich mir nicht sicher bin, wie ich einen link abfange und die oben gezeigt Lösung funktioniert bei mir komischerweise nicht.

Es ist eigentlich sogar relativ einfach.
Stichwort jQuery page transition
Wenn eine Seite geladen wird muss sie einfaden:
Beispiel:

Code javascript:

1 2 3

$(document).ready(function() {                         $("body").fadeIn(2000);     });

Wenn auf einen link geklickt wird soll die Seite ausfaden und danach der Link verfolgt werden:
Beispiel:

Code javascript:

1 2 3 4 5 6 7 8

$("a.transition").click(function(event){        event.preventDefault();         linkLocation = this.href;         $("body").fadeOut(1000, redirectPage);     });     function redirectPage() {         window.location = linkLocation;     }

Die Beispiele sind aus dem ersten Google Treffer.

Vielen Dank das funktioniert soweit. Ich musste mit Hilfe von dem Link von Google noch ein paar Dinge anpassen, aber es geht nun fast soweit.