JavaScript & jQuery & CSS & HTML の達人

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

jQueryでボタンが押されると緑色のボックスが枠の右端まで移動するスクリプトを簡単に作る

jQueryでボタンが押されると緑色のボックスが枠の右端まで移動するスクリプトを簡単に作ってみよう!

今回のサンプル 

ボタン「BUTTON」を押すとボタンの下にある緑色のボックスが枠の右端の位置に移動する。 

結果
BUTTON
 

jQuery + JavaScript

animate で緑色のボックスを動かす前に、自分を囲んでいる枠の横サイズを取得して「w」という変数に格納している。そこから自分の横サイズの20ピクセルを差し引いて右端の位置としている。 

<script type="text/javascript">
 $(function(){
  $("#test-botan3").click(function(){
   var w = $(".hako").width();
   $("#test-a1").animate({left:w - 20},1000);
  });
 });
</script>

CSS

CSSでボタンと緑色の「a1」という id が付いたボックス要素(div)の各スタイルを設定している。今回のCSSのポイントは「position」を 「relative」 に設定しているところ。ここを「absolute」にすると緑色のボックスは枠からはみ出してしまうし、何も設定しないと緑色のボックスは動かない。

<style type="text/css">
<!--
#test-botan3 {
 font-size: 12px;
 color: #000;
 background-color: #CCC;
 text-align: center;
 width: 100px;
 padding: 3px;
 margin-bottom: 10px;
}
#test-botan3:hover {
 cursor: pointer;
}
#test-a1 {
 background-color: #9C3;
 width: 20px;
 height: 20px;
 position: relative;
 color: #FFF;
 text-align: center;
}
-->
</style>

HTML

ボタンと緑色のボックスを、「hako」というクラスをもった <div> タグで囲んでいるHTML構成。 

<div class="hako">
<div id="test-botan3">BUTTON</div>
<div id="test-a1"></div>
</div>

 

End