jQuery - Formulare "hochrutschen" lassen?

[4dr14n]

Guten Morgen!

Ich habe ein Problem mit 'jQuery'.
Ich habe auf einer Seite 3 Formulare, die am Anfang NICHT sichtbar sind.
Nachdem man auf einen Button klickt, wird eins der Formulare sichtbar. Klickt man auf einen anderen Button, wird das dem zugewiesene Formular sichtbar und die anderen unsichtbar. Das klappt alles gut, nur habe ich jetzt das Problem, dass die Formulare alle untereinander geschrieben worden sind. Das heißt, das wenn ich das "2." Formular einblenden lasse, habe ich oben noch einen Leerraum vom 1.Formular und unten noch vom 3. Es sollen insgesamt 3 FOrmulare werden.
Hier mein bisheriger Code:

Im head-Bereich steht die Javascript-Funktion:

  
<script src="http://code.jquery.com/jquery-latest.js"></script>  
<script>  
$(document).ready(function()  
	{  
 	 	$('.musik_but').click(function()  
		{  
		$('.film').FadeTo("slow",0);  
		$('.programm').FadeTo("slow",0);		  
		$('.musik').FadeTo("slow",1);  
 		})  
 		$('.programm_but').click(function()  
		{	  
		$('.film').FadeTo("slow",0);  
		$('.programm').FadeTo("slow",1);		  
		$('.musik').FadeTo("slow",0);  
		})  
 		$('.film_but').click(function()  
		{  
		$('.film').FadeTo("slow",1);  
		$('.programm').FadeTo("slow",0);		  
		$('.musik').FadeTo("slow",0);  
		})  
	});  
 	 </script>  

Hier werden die Buttons (Auswahlliste) zugewiesen:

  
<select name="typ">  
 <option class="musik_but">Musik</option>  
 <option class="programm_but">Programm</option>  
 <option class="film_but">Film</option>  
</select>  
  
Hier sind die Formulare:  
  
<div class="musik">  
FORMULARINHALT 1  
</div>  
  
<div class="programm">  
FORMULARINHALT 2  
</div>  
  
<div class="film">  
FORMULARINHALT 3  
</div>  

Weiß jemand, wie ich die Formulare jetzt "hochrutschen" lassen kann? Sodass ich wenn das zweite eingeblendet werden soll das trotzdem ganz oben steht?
Ihr könnt ja den Code ausprobieren um zu sehen was ich meine, falls ich das noch nicht 100%-ig erklärt habe ;)
Leider habe ich im Internet dazu NICHTS gefunden, tut mir Leid.

Gruß
adrian

[Deus Figendi]

Ich habe das Script nicht ganz durchschaut, aber du müsstest/solltest einfach FadeTo bzw. animate dahingehend ändern, dass bei opacity = 0 der display-Wert auf none gesetzt wird.
Wenn es dir (wie mir) zu kompliziert ist dich durch diesen jQuery-Code zu graben kannst du das auch einfach zeitgesteuert nachträglich machen.
Will sagen: du rufst der "fader" auf und ab da kontrollierst du zwei bis fünf Mal die Sekunde ob die opacity schon auf null ist... das wäre allerdings der dreckige Weg :)

Kurz:
opacity 0 == unsichtbar
display none == nicht da
Du willst display none!

[jikwaierie]

Die "Animations" - Funktion unterstützen IMHO alle eine eigene "Ready" - Funktion. Daher eine Funktion die aufgerufen wird wenn die entsprechende Animation abgearbeitet wurde.

Bei Dir wäre das sowas wie:
$('.film').FadeTo("slow",0, function(){this.hide();});

[jikwaierie]

Nachtrag: Da "this" ja ein DOM-Element ist, muss jQuery(this).hide() angegeben werden.