|
|||
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> |
Sponsored Links |
Sponsored Links |
|
|||
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); }); HTML-Code:
$('div[id$="_content"]').fadeOut(500, function() { $('#design_content').fadeIn(500); }); Gruß, Max |
|
||||
Im übrigen reicht auch eine Funktion für alle Buttons
PHP-Code:
HTML-Code:
<li class="button" title="home_content">Home</li> <li class="button" title="design_content">Design</li> |
|
|||
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 |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |