JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【jQuery】ボタンをクリックすると要素が枠の右端まで移動するスクリプトを作ろう!

f:id:vw-dsg:20200601063533p:plain

ボタンクリックで緑色のボックスを右端に移動する

今回は jQuery を使って、ボタンをクリックすると緑色のボックスが枠の右端まで移動するスクリプトを作ってみよう!

実行結果サンプル 

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

結果
BUTTON

jQueryコード

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

ボタンの <div> 要素と緑色のボックスの <div> 要素を、「hako」というクラスをもった <div> 要素で囲んでいるところが今回のポイントです。 

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

END