アニメーション・・・jQueryによるアニメーション

html

<dl>
<dt>ここをクリックしてください</dt>
<dd class="d_none">テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■<br />
テキスト□テキスト■テキスト□テキスト■テキスト□テキスト■</dd>
</dl>

sample1のhtmlはこうなっています。
class[d_none]にはdisplay:noneが設定されています（ちなみにdtタグにはクリックする領域だとわかりやすいようにcursor:pointerが設定されています）。
便宜的に定義リスト（説明リスト／記述リスト）を使っていますが、使用可能タグはこれに限りません。

js

$(function(){
  $("dt").click(function(){
    if($("dd").css("display")=="block"){
      $("dd:not(:animated)").slideUp("slow");
    }else{
      $("dd").slideDown("slow");
    }
  })
})

dtタグをクリックしたら、function(){}の中の処理をしてください・・・とお願いしていますね（参考：イベントによる処理）。

if文による条件分岐が使われています（jsの話では、知っておいた方がネット上のサンプルコードなどを利用するときに楽になるとしか触れませんでしたが、こんな感じで使う場面が結構あります）。
ここではif（もし）ddタグのcssプロパティdisplayの値がblockだったら（=は右辺を左辺に代入、==は右辺と左辺が同じかどうか）、ddタグに対してslideUp()する、else（それ以外だったら）ddタグをslideDown()する・・・という処理になっています。

if文では()や{}の使い方に注意してください。()が入れ子になったりしたときに、対応する閉じ括弧がなかったりするとエラーになります。

さて、slideUp()/slideDown()が肝心のアニメーション部分です。
読んで字のごとく、スライドアップとスライドダウンしています。大文字・小文字はこの通りなので、間違えて記述すると、動作しません。注意してください。

では、この二つの()内に書かれているslowとはなんなのか・・・というと、動きのスピード（動作期間）を指定しています。このスピードにはslow／normal／fastの3種類あり、必ずクォーテーションで囲みます。これを省略すると、normalが適用されます。
この3種類のほかに、数値をいれることもできます。正の整数でms（ミリ秒）単位になります（jsに限らず、プログラムの世界ではたいていミリ秒単位です）。数値はクォーテーションで囲う必要はありません。数値が1000なら、1000ms（=1s）かかって動作します。

ところで、実は上のjqueryコードは次のように書くこともできます。

$("dt").click(function(){
    $("dd:not(:animated)").slideToggle("slow");
})

・・・短いですね。
if文使って、ごにょごにょやっていたことを、slideToggle()という素敵なAPIで処理してくれます（このように複雑なごにょごにょ（命令とか処理の集合）をやってくれているのがjqueryさんで、slideUp()とかslideToggle()といった「命令とか処理の集合」のことをAPIといいます）。

ちなみに、気になっている人は気になっていると思いますが、
:not(:animated)
は何のおまじないかというと・・・
スライドの動きの最中に、せっかちな人が何回もクリックしてしまうと、素直なjqueryさんはクリックした回数分だけスライドを繰り返してしまいます。
そこで、このおまじないをつけることで、一回の動作が終了するまで、動作中のクリックは無視してくれるのです（参考）。

実はこのサンプル、このままだとdt/ddタグが複数ある場合、うまく動作しません。
あるdtタグをクリックすると、全部のddタグがスライドダウン/アップします。そうならないために、いろいろ方法があるのですが、アニメーションから話がそれるので、ここでは割愛します。

html

<p>マウスオーバー<br>or<br>アウト</p>

上のサンプル2のhtmlはこうなっています（brタグのスラッシュの有無については、xhtmlかそれ以外かで適宜対応してください）。
pタグには、cssで背景色と幅と高さを設定しています。

js

$(function(){
  $('p').hover(function(){
  $(this).stop().animate({width:'200px',height:'200px'},500,function(){
    $(this).addClass('shadow');
  });
  },function(){
    $(this).removeClass('shadow');
    $(this).stop().animate({width:'100px',height:'100px'},500);
  })
});

hover()はマウスのロールオーバー/アウト時処理をお願いできます（mouseover()/mouseout()とは微妙に違います）。
二つのfunction(){}を,（コンマ）でつないでいます。最初のfunction(){}でロールオーバー時、次のfunction(){}でロールアウト時の処理を記述します。

なお、thisはここでは'p'のことです。

このサンプルではanimate()を使ってアニメーションを実行しています。
animate()はcssを使って、独自のアニメーションを作れます。書式は
animate(params, [duration], [easing], [callback])
となります。

• paramsに上記のようにcssプロパティを[,]で区切って、指定していきます。値はクォーテーションでくくってください。これらを{}でくくります。
• durationは動きのスピード（動作期間）でslow／normal／fastの3種類あり、必ずクォーテーションで囲みます。これを省略すると、normalが適用されます。
  この3種類のほかに、数値をいれることもできます。正の整数でms（ミリ秒）単位になります。数値はクォーテーションで囲う必要はありません。数値が1000なら、1000ms（=1s）かかって動作します。
• easingは動きを加速/減速させるための関数で、省略可です。はじめゆっくり最後に早くなどといったことができます。linearとswingの2種類がありますが、プラグインなど使っていろいろな動きを付けることができます。必ずクォーテーションで囲みます。（参考）
• callbackはコールバック関数のことで、省略可です。サンプルのようにfunction(){}を使って、アニメーション後の処理を追加できます。
  「コールバック関数」という言葉は、jqueryをやっているとちょくちょく出てくるので、覚えておくとよいと思います。

  ここではコールバック関数で、ロールオーバー後にbox-shadowを表示させるようにしてありますが、box-shadowが未対応なIE8以下では表示されません。

さて、ここでも
stop()
が何のおまじないか気になっているかと思います。
これもサンプル1の:not(:animated)と同じような役割を持っています。
ロールオーバー/アウト時の処理の最中にロールオーバー/アウトを繰り返したりすると、素直なjqueryさんががんばって処理を繰り返そうとするのです。
でも、タイムラグがあるからだんだん処理がたまってきて、最終的にロールアウトしても、まだ処理を繰り返していたり・・・ということを防ぎます。
（あ・・・クリックだから:not(:animated)、ロールオーバー/アウトだからstop()という使い方ではないですよ。）

• .animate() － 私的なjQuery
• [jQuery]こんな機能があったんだ。jQuery stop() － WEBプログラム覚書
• jQuery.stopのjumpToEnd引数が便利すぎてやばい － tech.kayac.com
• 【jQuery】animateでアニメーション中に新たに溜まった動作の処理をしない － 俺メモ Web時々アプリ