ボックス要素の幅を、指定したサイズまで拡大縮小アニメーション

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

ボタンクリックで、ボックス要素の幅を、指定したピクセル単位の数値まで拡大縮小するアニメーションのJavaScriptサンプル。

サンプル（実装例）

実装例の動作について

「300pxに拡大」ボタンをクリックすると、背景色が薄い青色のボックス要素の幅を、徐々に大きくなるアニメーションで、300pxまで拡大する。
「150pxに縮小」ボタンをクリックすると、背景色が薄い青色のボックス要素の幅を、徐々に小さくなるアニメーションで、150pxまで縮小する。
背景色が薄い青色のボックス要素の現在の幅を、ボックス要素の中に表示する。

ソースコード

JavaScript

<script type="text/javascript">
function expansionWidth( $target, $maxWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$targetElement.innerHTML = $width;
$width = parseInt( $width.replace( 'px', '' ) );
if( $width < $maxWidth ){
$targetElement.style.width = ++$width + 'px';
}else{
clearInterval( $intervalID );
disabledButtons( false );
}
}
}
function reductionWidth( $target, $minWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$targetElement.innerHTML = $width;
$width = parseInt( $width.replace( 'px', '' ) );
if( $width > $minWidth ){
$targetElement.style.width = --$width + 'px';
}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', '300' )">300pxに拡大</button>
<button onclick="reductionWidth( 'sample', '150' );">150pxに縮小</button>
</p>
<div id="sample" style="width: 150px; height: 150px; background-color: lightblue;"></div>

解説

JavaScript

<script type="text/javascript">

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

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

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

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

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

$targetElement.innerHTML = $width;

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

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

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

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

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

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

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

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

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

$targetElement.innerHTML = $width;

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

if( $width > $minWidth ){
$targetElement.style.width = --$width + 'px';
}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, アニメーション, 逆引きパーマリンク