html css, javascript: javascript: 2009年10月まとめ

[js] サーバーサイドjavascript「jaxer」

(2009年10月24日)

最近mtがブックマークみたいになってる。

それはさておき、たしかに1言語だけじゃ物足りない。特にhtmlとかjavascripterにとってプログラミング言語を多言語習得するのは敷居が一気に高くなるんじゃないかなぁと。javascriptだけでも大変なのに。

続きを読む: [js] サーバーサイドjavascript「jaxer」

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

(2009年10月22日)

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

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

ASCII.jp：意外性が心地よいJSメニューのWebデザイン｜29分でできる！あのサイトの"技"を盗め

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>