ボックス要素の幅を、指定した割合まで拡大縮小するアニメーション

投稿日: 2014年3月16日作成者: alphasis

ボタンクリックで、ボックス要素の幅を、指定した割合（パーセンテージ、％）まで拡大縮小するアニメーションのJavaScriptサンプル。

サンプル（実装例）

10%

実装例の動作について

「100%に拡大」ボタンをクリックすると、背景色が赤色のボックス要素の幅を、徐々に大きくなるアニメーションで、親要素の幅（500px）まで拡大する。
「10%に縮小」ボタンをクリックすると、背景色が赤色のボックス要素の幅を、徐々に小さくなるアニメーションで、親要素の幅（500px）の10%（50px）まで縮小する。
背景色が赤色のボックス要素の現在の幅の割合を、ボックス要素の中に表示する。

ソースコード

JavaScript

<script type="text/javascript">
function expansionWidth( $target, $maxWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
10
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$targetElement.innerHTML = $width;
$width = parseInt( $width.replace( '%', '' ) );
if( $width < $maxWidth ){
$targetElement.style.width = ++$width + '%';
}else{
clearInterval( $intervalID );
disabledButtons( false );
}
}
}
function reductionWidth( $target, $minWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
10
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$targetElement.innerHTML = $width;
$width = parseInt( $width.replace( '%', '' ) );
if( $width > $minWidth ){
$targetElement.style.width = --$width + '%';
}else{
clearInterval( $intervalID );
disabledButtons( false );
}
}
}
function disabledButtons( $disabled ) {
$buttons = document.getElementById( "sampleButtons" ).getElementsByTagName( "button" );
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = $disabled;
}
}
</script>

HTML

<p id="sampleButtons">
<button onclick="expansionWidth( 'sample', '100' )">100%に拡大</button>
<button onclick="reductionWidth( 'sample', '10' );">10%に縮小</button>
</p>
<div style="width: 500px; height: 50px; border: 1px solid gray;">
<div id="sample" style="width: 10%; height: 100%; background-color: red; color: white;">10%</div>
</div>

解説

JavaScript

<script type="text/javascript">

// 拡大用関数
function expansionWidth( $target, $maxWidth ) {

// ボタンを無効化
disabledButtons( true );

// 10ミリ秒ごとに「changeWidth()」関数を呼び出す繰り返しタイマー
var $intervalID = setInterval(
function(){
changeWidth()
},
10
);

// 10ミリ秒ごとに呼び出される関数
function changeWidth() {
var $targetElement = document.getElementById( $target );

// 現在の幅を取得し、変数「$width」に格納
var $width = $targetElement.style.width;

$targetElement.innerHTML = $width;

// 変数「$width」から「%」を取り除き、整数に変換
$width = parseInt( $width.replace( '%', '' ) );

if( $width < $maxWidth ){
$targetElement.style.width = ++$width + '%';
}else{

// 繰り返しタイマーを中止
clearInterval( $intervalID );

// ボタンを有効化
disabledButtons( false );
}
}
}

// 縮小用関数
function reductionWidth( $target, $minWidth ) {

// ボタンを無効化
disabledButtons( true );

// 10ミリ秒ごとに「changeWidth()」関数を呼び出す繰り返しタイマー
var $intervalID = setInterval(
function(){
changeWidth()
},
10
);

// 10ミリ秒ごとに呼び出される関数
function changeWidth() {
var $targetElement = document.getElementById( $target );

// 現在の幅を取得し、変数「$width」に格納
var $width = $targetElement.style.width;

$targetElement.innerHTML = $width;

// 変数「$width」から「%」を取り除き、整数に変換
$width = parseInt( $width.replace( '%', '' ) );

if( $width > $minWidth ){
$targetElement.style.width = --$width + '%';
}else{

// 繰り返しタイマーを中止
clearInterval( $intervalID );

// ボタンを有効化
disabledButtons( false );
}
}
}

// ボタンの有効無効を切り替える関数
function disabledButtons( $disabled ) {
$buttons = document.getElementById( "sampleButtons" ).getElementsByTagName( "button" );
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = $disabled;
}
}

</script>

主に使用した構文、プロパティ、メソッド、イベント等。

カテゴリー: JavaScript, アニメーション, 逆引きパーマリンク