Jquery how-to tutorial

Setup:
 
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
    /* Inhalt hiert */
</script>
 
Beispiel für eine Animationskette:
 
$(document).ready(function(){
 
   $("#header_logo img").addClass("hide_img")
      .animate({opacity: "0.5", height: "+=54", width:"+=245"}, 1200)
      .animate({opacity: "1"},1200)
      return false;
  });
Erklärung:
Wenn DOM geladen ist, dann wird dem Element "header_logo img" die CSS Klasse .hide zugewiesen.
Dann beginnt eine Animation. height und width werden angepasset bis 54px und bsi 245px, sowie die Transparenz. 1200 = Zeit in ms.
 
Fade-Effekt
 
Element zuerst verstecken (falls Javascript disabled ist) und dann einen fade-in Effekt
 
  $(document).ready(function(){
    $("#header_logo img").addClass("hide_img")
    .fadeIn(3000)
    oder
    .toggle(3000)
    return false;
  })
Diverses
 
  $("a").addClass("test");
  $("a").removeClass("test");
Schöner Effekt für Navigationen (simuliert mouseover und mouseout):
 
  $("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
Nochmals Mouseover
 
  $("#navigation a").mouseover(function(){$(this).fadeOut(800);});
  $("#navigation a").mouseout(function(){$(this).fadeIn(800);});