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

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

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

サンプル（実装例）

実装例の動作について

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

ソースコード

JavaScript

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

解説

JavaScript

<script type="text/javascript">

// 拡大用関数
function expansionHeight( $target, $maxHeight ) {

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

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

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

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

$targetElement.innerHTML = $height;

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

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

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

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

// 縮小用関数
function reductionHeight( $target, $minHeight ) {

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

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

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

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

$targetElement.innerHTML = $height;

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

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