slideDown()/slideUp()

slideDown()とslideUp()を使えば、
アニメーションする開閉式パネルを作れます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“dt”).click(function(){
  if($(“dd”).css(“display”)==”block”){
   $(“dd:not(:animated)”).slideUp(“slow”);
  }else{ 
   $(“dd”).slideDown(“slow”);
  }
 });
});
</script>

【CSS】
<style type=”text/css”>
<!–
dl {
 margin: 50px auto;
 width: 300px;
}
dl dt{
 background-color: #00CC66;
 cursor: pointer;
 padding: 5px;
}
dl dd{
 border: 1px solid #0033FF;
 margin: 0px;
 height: 300px;
 padding: 10px;
}
–>
</style>

【HTML】
<dl>
 <dt>スライドして表示非表示を切り替えるパネル</dt>
 <dd>slideUp()、slideDown()で開閉するパネル。jQueryを使えば簡単に実現できます。</dd>
</dl>

slideDown()/slideUp()サンプル

This entry was written by admin , posted on 日曜日 5月 15 2011at 02:05 pm , filed under アニメーション and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.