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:
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
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
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...
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:
$(function(){
$('#container').hide().fadeIn();
})
Code:
$('#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:
.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:
$('#container').fadeOut(1000, function() {
$this.load('tactics.html');
});