高さを変えるアニメーション

javascript

JSのページを作りました

http://www.x-shenwu.net/~home_page/js/

//--------------------------------------------------------------------//
// 前処理
//--------------------------------------------------------------------//
document.body.innerHTML  = "";
document.body.innerHTML += "<div>BOX</div>";

//--------------------------------------------------------------------//
// boxオブジェクト
//--------------------------------------------------------------------//
var box = {
           elem                 : document.getElementsByTagName('div')[0],
           init_height          : '200px',              // 初期高さ
           init_width           : '200px',              // 初期幅
           final_height         : '500',                // アニメーション後の高さ
           init_backgroundColor : 'blue',               // 初期色
           clear_id             : undefined,
           speed_dist           : 20,                   // アニメーション刻み幅
           speed_time           : 20,                   // アニメーション刻み時間

           animation : function(){
                         // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                         // 次の高さを求める
                         // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                         var current_height = parseInt(this.elem.style.height),
                             dist           = Math.ceil((this.final_height - current_height)/this.speed_dist),
                             next_height    = current_height + dist;

                         if( next_height >= this.final_height ){
                            // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                            // アニメーション後の高さに達した場合
                            // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                           clearInterval( this.clear_id );
                           this.elem.style.height = this.final_height + 'px';
                         }else{
                            // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                            // アニメーション後の高さに達してない場合
                            // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
                           this.elem.style.height = next_height + 'px';
                         }
                       },

           do        : function(){
                         this.elem.style.height          = this.init_height;
                         this.elem.style.width           = this.init_width;
                         this.elem.style.backgroundColor = this.init_backgroundColor;
                         this.elem.onclick               = function(){
                                                             box.clear_id = setInterval(
                                                                              function(){ box.animation() },
                                                                              box.speed_time
                                                                            );
                                                           }
                       }
          }

//--------------------------------------------------------------------//
// divタグをアニメーション化　実行
//--------------------------------------------------------------------//
box.do();