[js] jQuery独自の関数 animate()

(2009年10月22日)

animateって用意されてる関数だったのか。わかりにくすぎる。

jQueryでは手軽にアニメーションできる animate() が用意されており、...

animate()の練習。

navi01

nave02

navi03

<script>
  jQuery(function(){
    
    $(".btn1").hover(function(){
      $("#navi").animate({marginLeft:"0"}, 200);
    });
	
    $(".btn2").hover(function(){
      $("#navi").animate({marginLeft:"101"}, 200);
    });

    $(".btn3").hover(function(){
      $("#navi").animate({marginLeft:"202"}, 200);
    });
  });
</script>
<style>

.btn1,
.btn2,
.btn3 { width:100px; float:left; background:#ccc; margin:0 1px 0 0; text-align:center;}
#navi { 
    background-color:#333; 
    width:100px; 
	height:5px;
	clear:both;
  }
</style>
</head>
<body>
<p class="btn1">navi01</p>
<p class="btn2">nave02</p>
<p class="btn3">navi03</p>

<div id="navi"></div>

[ads]

Mac で Windows を動かすなら VMware Fusion
アメリカン・エキスプレス・カード ご入会キャンペーン実施中

カテゴリ:

タグ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/187

コメントする

タグクラウド

あわせて読みたいブログパーツ