zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery fadeIn() und fadeOut()

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2012, 20:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.11.2009
Beiträge: 132
andre-ne befindet sich auf einem aufstrebenden Ast
Frage jQuery fadeIn() und fadeOut()

Hallo!

Über fadeIn() möchte ich DIV Container anzeigen lassen.
Das Anzeigen der DIVs möchte ich über ein Menü steuern und dies funktioniert auch soweit, jedoch habe ich nun das Problem das wenn ich z.B. auf Home (#home) klicke und anschleßend auf Design (#design), dass eigentlich Home ausgeblendet werden soll und Design nur angezeigt werden soll. Dies ist aber nicht der Fall, logischerweise.

Nun hab ich gedacht ich könnte das ganze über fadeOut() steuern, jedoch stehe ich hier vor dem Problem das ich nicht weiß wie ich dies schreiben soll, da ich praktisch nicht weiß welcher DIV zuvor ausgewählt wurde bzw. ob überhaupt einer ausgewählt war.

Vielleicht hat jemand eine Lösung.

Code:
<DIV id="home_content">
            Home
			</DIV>
            <script>
            $('#home').click(function() {
      			$('#home_content').fadeIn('slow', function() {
    		});
			});
			</script>
            
            <DIV id="design_content">
            Design
			</DIV>
            <script>
            $('#design').click(function() {
      			$('#design_content').fadeIn('slow', function() {
			});
			});
			</script>
            
            <DIV id="fotografie_content">
            Fotografie
			</DIV>
            <script>
            $('#fotografie').click(function() {
      			$('#fotografie_content').fadeIn('slow', function() {
      		});
    		});
			</script>
            
            <DIV id="portfolio_content">
            Über mich
			</DIV>
            <script>
            $('#portfolio').click(function() {
      			$('#portfolio_content').fadeIn('slow', function() {
      		});
    		});
			</script>
            
            <DIV id="kontakt_content">
            Kontakt
			</DIV>
            <script>
            $('#kontakt').click(function() {
      			$('#kontakt_content').fadeIn('slow', function() {
      		});
    		});
			</script>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2012, 20:20
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von andre-ne Beitrag anzeigen
Code:
 $('#home').click(function() {
      	$('#home_content').fadeIn('slow', function() {
    		});
});
Warum hast Du dort leere Funktionen drin stehen? Wenn Du sie nicht brauchst, lass sie weg.

Aber du kannst sie natürlich nutzen. Vergib einfach mit addClass eine Klasse, die dir dann als selektor für das aktuell angezeigte Element dient. Beim Klick, blendest Du zuerst dieses Element aus, nimmst die Klasse mit removeClass() weg, und blendest das nächste ein. Anschließend noch die Klasse auf das neue Element setzen.
Damit das ganze nacheinander funktioniert, nutzt du die Callback-Funktionen.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2012, 14:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 414
Maxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer Mensch
Standard

Alternativ gibst du allen Content-DIVs eine Klasse (z.B. "content"), damit du sie leicht ansprechen kannst. Dann blendest du einfach alle Elemente aus, bevor du deine neue "Seite" einblendest.

HTML-Code:
$('div.content').fadeOut(500, function() {
  $('#design_content').fadeIn(500);
});
Wenn du dir die Klasse sparen willst, kannst du natürlich auch alle Elemente suchen, bei denen die ID auf _content endet. Das ist langsamer, aber in deinem Fall wirst du das vernachlässigen können.

HTML-Code:
$('div[id$="_content"]').fadeOut(500, function() {
  $('#design_content').fadeIn(500);
});
Attribute Ends With Selector [name$="value"] – jQuery API

Gruß,
Max
Mit Zitat antworten
  #4 (permalink)  
Alt 16.01.2012, 15:22
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Im übrigen reicht auch eine Funktion für alle Buttons
PHP-Code:
$('.button').click(function(){
    $(
'.content').fadeOut();
    $(
'#' + $(this).attr('title')).fadeIn();
}); 
Die Buttons müssten dann so aussehen:
HTML-Code:
<li class="button" title="home_content">Home</li>
<li class="button" title="design_content">Design</li>
usw...
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2012, 15:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 414
Maxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer Mensch
Standard

Das funktioniert zwar, aber der User bekommt dann ein ziemlich sinnfreies Tooltip zu sehen. Das HTML5-Data-Attribut ist da besser geeignet.

John Resig - HTML 5 data- Attributes
.data() – jQuery API

Gruß,
Max
Mit Zitat antworten
  #6 (permalink)  
Alt 18.01.2012, 15:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.11.2009
Beiträge: 132
andre-ne befindet sich auf einem aufstrebenden Ast
Standard

Okay super danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery (coda slider) und prototype (Lightbox) konflikt computernerd Javascript & Ajax 3 21.09.2011 20:04
jQuery fadeIn bei mouseover div Scolex Javascript & Ajax 8 17.03.2011 23:05
schleife for fadeIn fadeOut realmuecke Javascript & Ajax 3 07.01.2010 19:08
jQuery - verschachtelte website Illuminu Javascript & Ajax 9 19.10.2009 03:38
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 17:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:33 Uhr.