• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Weiche Übergänge

T

th_wolfgang

New member
Hallo,

wie kann ich es erreichen, das meine Webseite, weiche Übergänge (langsam einblenden etc.) beim Umschalten ausgibt, z.B. wenn jemand auf einen Button, internen Link drückt oder im Menu „weitergeht“. Geht sowas per .htaccess oder JavaScript / CSS? Momentan hackt das alles ein wenig beim Umschalten, daher dachte ich an einen „weichen“ Übergang.

Ich habe zwar bereits etwas gefunden CSS3, mir wäre JavaScript-Lösung allerdings lieber, da ich dann (hoffe ich wenigstens) dann nicht jede DIV einzeln anpassen muss.

So funktioniert es schon mal nicht:

Code: 
$(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;
		});
});


Leider geht es so auch nicht! Wo ist denn der Fehler?

Code: 
<script type="text/javascript">
// code direkt nach seitenaufbau starten
$(document).ready(function()
{
   // allen links im div 'navigation' & 'content' eine click()-funktion zuweisen
   // es wird auch auf alle links von der dynamisch nachgeladenen
   // seiten reagiert (solange die seiten in das content-div geladen werden)!
   $("#nav-container a, #body a, #content a").live("click",function()
   {
    // das link-ziel jeweils auslesen & zwischenspeichern
    var pageToLoad = $(this).attr("href");
    // varaible für den neuen inhalt
    var pageContent;
        
    // die externe seite laden, der inhalt ist dann in 'data'
    $.get(pageToLoad, function(data)
    {
       // den inhalt zwischenspeichern
       pageContent=data;
            
       // content-div langsam ausblenden
       $("#content").fadeOut("slow", function()
       {
        // wenn das ausblenden fertig ist, inhalt an das content-div übergeben
        $("#content").html(pageContent);
        // content-div langsam wieder einblenden lassen
        $("#content").fadeIn("slow");
 
        // oder in kurzer form (vorzuziehen)
        // $("#content").html(pageContent).fadeIn("slow");
       });
    });
        
    // wichtig! sonst wird der a-link im browser aufgerufen!
    return false;
});
});
</script>

Danke & LG
Wolf
 
Zuletzt bearbeitet:
Hallo Sempervivum,

danke,

eine kleine Frage, ich finde in dem bisherigen Code kein live(), was genau muss ich mit on() ersetzen?

Danke & LG
Wolf
 
Hier, zweite Codezeile hinter document-ready:
Code: 
$("#nav-container a, #body a, #content a").live("click",function()
in dem zweiten, längeren Code.
 
Zuletzt bearbeitet:
Hallo Sempervivum,

danke, hatte ich nicht gesehen... So jetzt:

$("#nav-container a, #body a, #content a").on("click",function()

Noch eine Frage, das html muss ich in php ändern? Oder?

Danke & LG
Wolf
 
Zuletzt bearbeitet von einem Moderator:
Hallo Sempervivum,

leider funktioniert es nicht, so dachte ich das evtl. $("#content").html(pageContent); das html in ein php geändert werden muss. Da meine Seite in php "zuhause" ist.

Danke & LG
Wolf
 
Nein, dieses html ist durch jQuery vorgegeben und Du darfst es nicht ändern. Hast Du den Code von irgendwoher übernommen? Dann musst Du u. U. die Selektoren anpassen. Am besten lädst Du es mal hoch und postest die URL. Du musst außerdem beachten, dass in dem Code, den Du nachlädst, kein Grundgerüst vorhanden ist, denn Du trägst ihn ja in den #content-Kontainer ein.
 
Warum einen anderen? Ich finde den, der mit get() die Inhalte nachlädt, sehr gut und bei mir funktioniert er einwandfrei. Ist sicher nur eine Kleinigkeit. Hast Du mal die Selektoren überprüft ($("#nav-container a, #body a, #content a") und $("#content"))?
 
Hallo Sempervivum,

danke,

dann versuch ich es noch einmal!

Mit:
$("#nav-container, #body, #link, #content").on("click",function()

...hoffe ich bau da nicht schon wieder einen Wurm rein.

LG & Danke
Wolf
 
Ich fürchte, das ist ganz falsch, weil Du das "a" gelöscht hast. Es war vorher schon richtig, Du musst nur überprüfen, ob es die IDs #nav-container, #body, #link, #content auch in deinem HTML gibt.
 
Hallo Sempervivum,

danke,

Danke für deine Geduld, mit mir!

Ja, diese #nav-container, #body, #link, #content gibt es. Auch noch ein paar die als class und nicht als id geschrieben sind. Hinter alles muss ein „a“?
Wie kann ich den Effekt slow noch langsamer gestalten um auch zu merken, wenn es dann gehen sollte.

NACHTRAG: besteht eine Möglichkeit, alle Div ob id oder class also alle Klicks ohne z.B. #body, #link, #content aufzuführen so weich einblenden zu lassen?

Ich habe alles mal so angepasst: $(".nav-container a, #body a, #footer-content a, #header a, #content a").on("click",function()

Muss ich hier auch alle Div auflisten?
$("#content").fadeIn("slow");

...umwohl es beim Content auch noch nicht funktioniert.


LG & Danke
Wolf
 
Zuletzt bearbeitet:
besteht eine Möglichkeit, alle Div ob id oder class also alle Klicks ohne z.B. #body, #link, #content aufzuführen so weich einblenden zu lassen?
Zum Vergrößern anklicken....
Du kannst alles weich einblenden, wenn Du die Funktion fadeIn() darauf anwendest. Versuche aber erst Mal, das Skript, so wie es ist, zum Laufen zu bringen.
Die Selektoren vor dem on() sollten so in Ordnung sein. Wenn Du willst, dass jeder Link auf diese Weise behandelt wird, kannst Du aber auch einfach $("a") schreiben.
Wie kann ich den Effekt slow noch langsamer gestalten um auch zu merken, wenn es dann gehen sollte.
Zum Vergrößern anklicken....
Statt der Strings "slow" und "fast" kannst Du auch eine Zeit in Millisekunden angeben, die der Effekt dauern soll.
 
Hallo Sempervivum,

dank dir!

aber das mit dem $("a") funktioniert nicht, da haut er mir das komplette Content weg... Irgenwo habe ich einen Wurm! Das kann doch nicht so schwer sein... :/

Evtl. liegt es ja am Modernizer...(http://modernizr.com/download/#-fon...stallprops-hasevent-prefixes-domprefixes-load) Jetzt habe ich das Script mal "unter ihn" kopiert. So ist mein Content auch weg, wenn ich dies angebe: $(".nav-container a, #body a, #footer-content a, #header a, #content a").on("click",function()

In meinem CSS gibt es nicht nur einen #Content sondern auch separat einen #Content a{ Kann es evtl. daran liegen?

NACHTRAG: Modernizer habe ich komplett entfernt, bringt aber auch nichts, auch wenn ich lediglich den Footer einbinde, ist das komplette Content mit diesem Script weg.

Danke & LG
Wolf
 
Zuletzt bearbeitet:
da haut er mir das komplette Content weg
Zum Vergrößern anklicken....
Was bedeutet das? Weiße Seite ohne Ihnhalt?
In meinem CSS gibt es nicht nur einen #Content sondern auch separat einen #Content a
Zum Vergrößern anklicken....
Das sollte in Ordnung sein, #Content adressiert das Element mit der ID Content selber und #Content a die a-Tags, die darin liegen.
Beschränke dich doch für den Anfang erst Mal auf die Navigation, wahrscheinlich:
$(".nav-container a").on("click",function()
Du schreibst, dass die Seite auf PHP basiert. Könnte es sein, dass Du beim Einbinden des Skriptes Syntaxfehler in PHP hervorrufst (weil Du schreibst, dass es dir den Content zerstört).
Am besten wäre es, wenn Du es online stellst und die URL postest, damit man es sich im Zusammenhang ansehen kann.
 
Hallo Sempervivum,

dann lade ich mal neu... Ich glaube momentan, dass ein Script vorher in der Befehlszeile das Problem verursachen kann.
So habe ich die Position von diesem Script angepasst. Seit dem ist das Content nicht mehr weg. Aber der Übergang geht auch nicht.

Bei der "Content Zerstörung" war der komplette Inhalt vom Content weg. Das Content, welches sich an die Höhe anpasst, war nicht mehr zu sehen, lediglich die Überschrift. (ich habe allering ein paar position:fixed; drin.)

LG & Danke
Wolf
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben