Hallo Forum,
ich bin neu im Forum und benutze die Gelegenheit mich kurz vorstellen. Mein Name ist Juergen und ich komme aus Hessen. Bin 53 Jahre alt und bin dabei mich etwas in jQuery einzuarbeiten. Also ich habe folgendes Problem.

Ich moechte mit Slideup und fade DIV-Container ein und aus fahren lassen. Es sind 5 Container die beim Laden der Seite alle zu sein sollen. Auf klick soll der jeweilige Container mit fade Effekt auffahren. Mit klick auf einen anderen Link soll der geoeffnete Container mit fade zufahren und dann erst der gewuenschte Container mit fade auffahren.

Dazu habe ich in den letzten Wochen viel gelesen und folgenden Code zusammen gebracht. Funktioniert auch sehr gut aber der Fadeeffekt fehlt mir. Die Container werden einfach nur auf- und zugefahren. Desweiteren ist der Code bestimmt noch zu verbessern bzw. zu optimieren. Das Auffahren soll mit dem Fadeeffekt gleichzeitig geschehen. Ich habe wirklich viele Stunden damit verbracht dieses Beispiel hier zusammen zubringen aber jetzt bin ich am Ende mit meiner Kunst.

Ich wuerde mich sehr freuen wenn mir einer eventuelle Tips bzw. Loesungswege geben koennte.

Hier mal meine komplette Testseite:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>


<title>Test</title>
<script type="text/javascript">


jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};


$(document).ready(function(){
    $('.unsichtbar div').hide();


    $("#link1").click(function () {
     $("#div2").slideUp("slow", function() {
      $("#div3").slideUp("slow", function() {
       $("#div4").slideUp("slow", function() {
        $("#div5").slideUp("slow", function() {

         $('#div1').slideFadeToggle({speed:600, easing : "swing"});

          });
       });
      });    
     });
    });   
    
    $("#link2").click(function () {
     $("#div1").slideUp("slow", function() {
      $("#div3").slideUp("slow", function() {
       $("#div4").slideUp("slow", function() {
        $("#div5").slideUp("slow", function() {

         $('#div2').slideFadeToggle({speed:600, easing : "swing"});

          });
       });
      });    
     });
    });   
    
    $("#link3").click(function () {
     $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("slow", function() {
       $("#div4").slideUp("slow", function() {
        $("#div5").slideUp("slow", function() {

         $("#div3").slideFadeToggle({speed:600, easing : "swing"});

          });
       });
      });    
     });
    });   
    
    $("#link4").click(function () {
     $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("slow", function() {
       $("#div3").slideUp("slow", function() {
        $("#div5").slideUp("slow", function() {

         $("#div4").slideFadeToggle({speed:600, easing : "swing"});

          });
       });
      });    
     });
    });   
    
    $("#link5").click(function () {
     $("#div1").slideUp("slow", function() {
      $("#div2").slideUp("slow", function() {
       $("#div3").slideUp("slow", function() {
        $("#div4").slideUp("slow", function() {

         $("#div5").slideFadeToggle({speed:600, easing : "swing"});

          });
       });
      });    
     });
    });
 });
</script>




<style type="text/css">
.unsichtbar {
 display:none; opacity:0;
}
#div1 {
    background-color: #00FFFF;
}
#div2 {
    background-color: #00FF00;
}
#div3 {
    background-color: #FFFF00;
}
#div4 {
    background-color: #FF00FF;
}
#div5 {
    background-color: #FF0000;
}
</style>

</head>

<body>

<p>
<a id="link1" href="#">Link1</a> | 
<a id="link2" href="#">Link2</a> |
<a id="link3" href="#">Link3</a> | 
<a id="link4" href="#">Link4</a> |
<a id="link5" href="#">Link5</a>
</p>


<div class="unsichtbar" id="div1">
    Hier steht was drin<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box1<br />
    -<br />
    -<br />
    -
</div>

<div class="unsichtbar" id="div2">
    Hier steht was drin<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box2<br />
    -<br />
    -<br />
    -
</div>

<div class="unsichtbar" id="div3">
    Hier steht was drin<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box3<br />
    -<br />
    -<br />
    -
</div>

<div class="unsichtbar" id="div4">
    Hier steht was drin<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box4<br />
    -<br />
    -<br />
    -
</div>

<div class="unsichtbar" id="div5">
    Hier steht was drin<br />
    -<br />
    -<br />
    --<br />
    -<br />
    Box5<br />
    -<br />
    -<br />
    -
</div>

</body>

</html>