Weicher Seitenwechsel mit jQuery (fade in / fade out)

[Basser317]

Hallo nettesekel,
vielen Dank für den Beitrag mit dem Seiten "FadeIn / FadeOu"t. Ich habe diesen Code in meine Seiten eingebaut. Das FadeIn funktioniert hervorragend, aber beim Wechsel zur nächsten Seite wird die aktuelle nicht ausgefaded sondern ist schlagartig weg und die neue Seite wird eingefaded. Wie bekomme ich es hin, dass die aktuelle Seite auch ausgefaded wird?
Vielen Dank für die Hilfe!

Bassige Grüße,
Andreas

[nettesekel]

Hallo Basser317 und willkommen im Forum, 

wie es aussieht, bringt das Script das so mit sich. Habe mal versucht ein wenig daran zu drehen, aber das Ergebnis ist der alten Version gleihc. Muss mich mal nach einer Alternative umsehen. 

l.g. nettesekel

[nettesekel]

Nachtrag: Man bekommt das Ausfaden auch über das aktuelle Script realisiert, allerdings gibt es dann beim Wechsel ein unschönes Ruckeln... das würde mich mehr stören als das Ausgangsproblem: Habe es auf unserer Demo-Page mal so eingestellt: http://demos.nof-community.de/weicher-seitenwechsel-mit-jquery-fade-in-fade-out/demo.html

[Basser317]

Vielen Dank für die schnelle Antwort.
Schade, dass es so ruckelt!
Gibt es denn evtl. eine andere Variante, wo es nicht so auffällt - z. B.  von und nach oben In- und Outsliden?

Bassige Grüße,
Andreas

[nettesekel]

Ich habe heut schon ein wenig gegoogelt und einiges ausprobiert, aber leider war bislang alles genauso oder schlimmer. Ich schau mich ber noch etwas um.
Du könntest ja auch mal ein wenig googeln. Wenn du ein Beispiel finden würdest, das passt, (gibt ja oft Demos) kann man ja zusammen gucken, wie mans in NOF reinfrickelt.
 

[Basser317]

Bin schon die ganze Zeit beim Suchen. Sollte ich etwas finden, werde ich es natürlich hier posten.
Vielen Dank für deine Hilfe!

Bassige Grüße,
Andreas

[Basser317]

Nachtrag...

Also, ich habe es jetzt mit folgendem Code hinbekommen:


 $(document).ready(function() {

               $("body").hide().delay(1000).fadeIn()
      
      $('a').click(function() {
         url=$(this).attr("href")
            $("body").fadeOut('slow', function() {
               window.location.replace(url);
            });
         return false;
      });
});


Diesen in "custom.js" einsetzen und es funktioniert - ohne Ruckler!

Bassige Grüße,
Andreas

[nettesekel]

Den habe ich gestern auch ausgegraben und getestet. https://community.contao.org/de/showthread.php?27046-Weicher-Seiten%FCbergang-bei-Klick-auf-Link-im-Men%FC Zumindest in meinem FF fand ich das nicht optimal. Ich hatte da ca. 1 Sekunde ein weißes Fenster bevor die neue Seite einblendete.

[Basser317]

Bei mir sind keine weißen Blitze sichtbar!

Habe folgende Einstellung genommen:  .delay(170). fadeIn(2000)

Als ich .delay(1000) hatte, waren die Blitze auch bei mir sichtbar.

Der einzige Punkt der jetzt stört... Wenn die Seite ausgeblendet ist springt das Hintergrundbild kurz nach rechts, weil der Scrollbalken auch verschwindet und dann wieder nach links weil er wieder mit eingeblendet wird. Hast du dafür evtl. eine Lösung?

Bassige Grüße,
Andreas

[nettesekel]

Das Einzige was ich mir vorstellen könnte, ist das hier: https://www.nof-community.de/problemloesungen-fuer-netobjects-fusion/meine-seiten-springen-im-browser-beim-seitenwechsel/
Wenn du es nicht ohnehin schon nutzt.

[Basser317]

Aber ich benutze kein NOF.
Habe jetzt folgenden Code gefunden und diesen in den Head-Breich eingefügt.

<style type="text/css"> body{ overflow:scroll; overflow: -moz-scrollbars-vertical; overflow-x: auto; } </style>

Funktioniert hervorragend...

Vielen Dank für deine Hilfe!

Wenn ich alles online habe, gebe ich dir mal Bescheid, dann kannst du es dir ja mal anschauen und wie gesagt - OHNE Blitze!

Bassige Grüße,
Andreas

[nettesekel]

Ich probiers in NOF mal mit deinen Einstellungen aus. Manchmal Blitzt NOF auch dazwischen.

Der Schnipsel der da im Tutorial auftaucht ist auch in jedem anderen prog verwendbar. Man braucht ihn nur in irgendeine vorhandene Style-Datei integrieren. Oder eben zwischen den head-Tags platzieren.

Ha, wie lustig... du kommst auch noch aus meiner Heimat... ja, ja, die Welt ist ein Dorf...

[nettesekel]

Ich habe jetzt exakt deine Einstellungen in unserer Demo-Page und der Wechsel ist nach wie vor unschön. Liegt vermutlich am Doctype... du arbeitest mit HTML5 und die Testseite mit LOOSE...


***edit*** nein, der Doctype bringt auch keine Verbesserung***

[Basser317]

So, ich habe nun mal die Seiten online gestellt.
Also bei mir funktionieren die Übergänge sauber! Wie sieht es bei dir aus, wenn du meine Seiten durchklickst? Geht es oder blitzt es bei dir?

Das Einzige, was ich jetzt noch hinbekommen muss, ist, das der Headbereich nicht mit ein- oder ausgeblendet wird. Dieser ändert sich ja nicht wie der Seiteninhalt. Kennst du hier evtl eine Möglichkeit oder Herangehensweise? Ich werde natürlich auch weitersuchen!
Bis später...

Und danke für dein Feedback!!!

Bassige Grüße,
Andreas

[nettesekel]

Bei manchen Seiten blitzt es ein wenig, aber nur ganz selten.

Wenn du den Header nicht mitfaden lassen willst, müsstest du den Effekt nicht auf den ganzen body anwenden sondern nur auf den Bereich der faden soll. Der muss natürlich im QT dementsprechend definiert sein. z.B. ein div mit einer bestimmten ID... das ist aber nur mal so grob aus dem Bauch heraus...