✔ einfacher Content Fader mit jQuery

[ZipZek]

Hey Community,

habe eine Frage, wie ich einen Content-Fader hinbekomme. Also
ein Content div dass bei click auf einen Link den Content1 ausfadet, Content2 einfadet. Clickt man jetzt wieder auf den Link (eine NEXT-Button) fadet Content2 aus und Content3 wird eingefadet usw... Ich möchte wie gesagt nur 1 Button benutzen der immer wieder den nächsten Content reinfadet und den davorigen ausfadet.

Muss kein Ajax sein, sondern einfach <div id="content1"></div>, <div id="content2"></div>, usw.. die man display:hide setzt und auf abruf einfadet.

Danke für die Mühe,
Gruß, ZipZek

 

[Sven Mintel]

Moin

kürzer dürfte es kaum gehen

<b onclick="funktion()">klick</b>
<div id="content">
  <div>content1</div>
  <div style="display:none">content2</div>
  <div style="display:none">content3</div>
</div> 
<script type="text/javascript">
function funktion()
{
    //Herausfaden
  $('#content div:first').fadeOut("slow",
                                    //callback
                                  function()
                                  {
                                      //aktuelles div ans Ende verschieben
                                    $(this).remove().appendTo("#content");
                                      //Erstes div hereinfaden
                                    $('#content div:first').fadeIn("slow");
                                    }
                                  );
}
</script>

Bedingung: Du hast ein gemeinsames div(hier #content)...die zu fadenden divs sind dessen Kindelemente(IDs sind nicht vonnöten).
Beim Klick wird das 1. Div herausgefadet. Ist das getan, wird die Callbackfunktion aufgerufen, welche das 1. Div ans Ende von #content verfrachtet, und nun das neue 1. Div hereingefadet...eine umständliche Überprüfung, was eigentlich gefadet werden soll, ist so nicht vonnöten, weil immer das 1. Div in #content gefadet wird

 

[Untitled]

Genial! Genau sowas hab ich gesucht. Bin überhaupt gerade erst auf Jquery gestoßen und werd jetzt gleich versuchen, das ganze zeitlich zu triggern. Danke!