JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

jQuery で素早く上下に動くボックスを作ってみよう

下にあるピンク色のボックスをクリックすると素早く上下に動きます。このボックスを動かしているのは、jQueryの「animate関数」です。

今回のサンプル結果

 

Html

 <div id="test-box"></div>

jQueryコード

<script type="text/javascript">
 $(function(){
  $("#test-box").click(function(){     //クリックを検出するリスナー
   $("#test-box").animate({top:"500px"}, 300);     //500px下に移動
   $("#test-box").animate({top:"0px"}, 300);     //500px上に移動
  });
 });
</script>

ひとつ目のanimate関数で、ピンク色のボックスをトップの位置から500px下に移動します。そして二つ目のanimate関数で、そのボックスをトップの位置から0pxまで移動します。この2つの命令でピンク色のボックスがブーメランのように戻ってくる動きを作っています。

スタイルシート

<style type="text/css">
 <!--
  #test-box {
   background-color: #F39;
   height: 100px;
   width: 100px;
   position: relative;
  }
 -->
</style>

 

END