[jQuery] Content Fade mehrerer DIV's

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich habe folgende Inhaltscontainer:

HTML: 
<!-- Navi -->
<a id="show-Home">Home</a>
<a id="show-Aktuelles">Aktuelles</a>
<a id="show-Kontakt">Kontakt</a>
<!-- Inhaltscontainer -->
<div id="Home" style="display:block;"> Inhalt wird angezeigt</div>
<div id="Aktuelles" style="display:none;"> Inhalt wird NICHT angezeigt</div>
<div id="Kontakt" style="display:none;"> Inhalt wird NICHT angezeigt</div>

Jetzt finde ich kein passendes jQuery Plugin, was beim klicken der Links den entsprechenden Container einblendet (mit fadeIn).

Ich habe eine Seite mit wenig Inhalt und möchte daher alles in meiner index.html unterbringen und nur jeweils den Inhalt durch das Ein- und Ausfaden ändern.

Dazu muss es was geben aber scheinbar benutze ich bei Google die falschen Suchbegriffe.
Ich hoffe ihr könnt mir helfen.

Gruß
D.
 
Ich habe es selber hinbekommen:

HTML: 
	/* CONTENT AUSTAUSCHEN */
	$('.change').click(function(){
		 // ID des einzublenden Inhalts holen
		 showID = this.id;
		 // Alten Content ausblenden und neuen Content einblenden
		 $(".current").fadeOut(1000);
     $("#"+showID+"-div").fadeIn(1000);
		 // Aktiven Inhalt kennzeichnen
		 $(".current").removeClass("current");
		 $("#"+showID+"-div").addClass("current");
  });

Ich nutze ein Fullscreen Bild als Hintergrundbild und beim fadeIn stockt das ein wenig, obwohl ich gerade nur local entwickel und somit keine Ladezeiten habe. Was kann ich da machen? Das FadeIn sollte ja schon flüssig laufen!
 
Man braucht nicht für alles Plugins, sowas ist kinderleicht selbst zu machen.

Javascript: 
var links = $('a');
var contents = $('div');

links.click(function(e) {
	e.preventDefault();
	
	contents.hide().eq(links.index(this)).fadeIn();
});

Du musst natürlich die beiden Selektoren noch anpassen.

Aus SEO Sicht solltest du die Seite so aufbauen, dass du Anker benutzt. Also wenn man ohne JS auf die Links klickt, sollte man zum entsprechenden DIV springen und wenn man eine Seite mit JS aufruft mit einem Anker im Link, sollte auch das entsprechende DIV eingeblendet werden.
 
So, jetzt hier nochmal mein vollständiges Script:

Code: 
	/* CONTENT AUSTAUSCHEN */
	// Aktuellen Inhalt anzeigen
	$(".current").show();
	// Aufruf bei klick der Navigation
	$('.change').click(function(){
		 // ID des einzublenden Inhalts holen
		 showID = "#"+this.id+"-div";
		 
		 // Textbox mit alten Inhalt ausblenden
		 $(".content").animate({top:"100px", opacity: 0}, "300");
		 // Textbox mit neuen Inhalt nach Verzögerung einblenden
		 $(".content").delay(1100).animate({top:"0px", opacity: 1}, "300");
		 
		 // Alten Inhalt ausblenden
		 $(".current").fadeOut(1000);
     // Nenuen Inhalt einblenden
		 $(showID).fadeIn(1000);
		 
		 // Aktiven Inhalt kennzeichnen
		 $(".current").removeClass("current");
		 $(showID).addClass("current");
  });

Über den Fullscreenbild habe ich noch einen Textcontainer, der nun auch ausgeblendet wird.

Jedoch ist die Performance nicht gut. Liegts am Code? Kann man das optimieren? Mache ich zu viele Aktionen gleichzeitig?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück