●スクリプト

<script type="text/javascript">
$(function(){

  $("button#i_hyouzi_soku").click(function(){
    $("div#i_kantou").css("display","");
  })

  $("button#i_kesu_soku").click(function(){
    $("div#i_kantou").css("display","none");
  })

  $("button#i_hyouzi_anime").click(function(){
    $("div#i_kantou").show("normal");
  })

  $("button#i_kesu_anime").click(function(){
    $("div#i_kantou").hide("normal");
  })

});
</script>



<script type="text/javascript"><!--

function hiraku(tgt){ // 開く
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}

function toziru(tgt){ // 閉じる
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}

//--></script>

●HTML
<button id="i_hyouzi_soku">表示する：即</button>
<button id="i_kesu_soku">消す：即</button>
<button id="i_hyouzi_anime">表示する：アニメ</button>
<button id="i_kesu_anime">消す：アニメ</button>

<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou">
関東
<div id="i_kantou" style="display: none;">
<a class="c_tokyo" href="#">東京</a>
<a class="c_kanagawa" href="#">神奈川</a>
<a class="c_saitama" href="#">埼玉</a>
</div><!-- end of i_kantou -->
</div><!-- end of c_kantou -->


●CSS

.c_kantou{
background-color:lightskyblue;
border: 0px solid #FF0000;
width:200px;
float:left;
}

.c_tokyo{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:lightgreen;
}

.c_kanagawa{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:springgreen;
}

.c_saitama{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:greenyellow;
}


●解説
jQueryのshowやhideを使えば、アニメーションでdiv領域を表示させたり、非表示にしたりできる。
normalは速度が通常であることを示す。slowやfastも設定できる。数字で1000と入力した場合は
１秒間の意味になる。数字の場合はダブルクォートで囲まなくてもよい。

サンプルソース
http://tokyo-webs.jp/sample_source/130327d/

東京ウェブ制作