Setup:

  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
  <script type="text/javascript">
    /* Inhalt hiert */
  </script>

Natürlich immer die aktuellste Version verwenden.

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);});

Erklärung des CSS Box Modells:

margin – border – padding – height/widht – padding – border – margin

div#box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    padding: 10px;
    margin: 5px; }

Moderne Broswer interpretieren das so:
width=5+10+2+100+2+10+5

Selbst der IE6 macht das richtig wenn er nicht im QUIRKS mode ist (doctype beachten)!