Script for Div Resize Animation

Although it seems width and height attribute can be set either when position is set (relative or absolute) or not, here div has to be set {position: absolute} in order to overcome the weird action in IE.

Div resizes vertically

test reset

Test the javascript animation
div resize vertically.

Div resizes vertically means the height attribute of the div keeps changing during the setTimeout session. It happens when both width values at the start and end are equal.

if (settings.to.width == _this.start.width) { // y 
        var descend = (settings.to.height>_this.start.height) ? false : true; 
        var s = Math.min(_this.start.height,settings.to.height); 
        var d = Math.max(_this.start.height,settings.to.height); 
        _this.speed = (d -s)/settings.delay;
            for (i = s; i <= d; i++) { 
              var delay = (descend==true) ? (d-i)*settings.delay/(d - s) : (i-s)*settings.delay/(d - s);  

              (function(j) { 
                    setTimeout(function() { 
                         _this.style.height = j+_this.heightunit; 
                         if (descend==false&&j==s){
                            _this.style.display ="block";
                            if (callbk!=undefined) {callbk.call(_this);}          
                         }
                         if (descend==true&&j==s){
                            if (s==0) _this.style.display ="none";
                            if (callbk!=undefined) {callbk.call(_this);}
                         }
                          
                          },delay); 
                })(i); 
            }     
    }

How to use?

The width attribute of the div (id = box3) is kept unchanged at 500px. Simply use one statement to resize the div vertically.

$("box3").resize({delay:200,to:{width:500,height:0}});

$("box3").resize({delay:200,to:{width:500,height:80}});

Div resizes horizontally

Div resize horizontally happens when both height values at the start and end are equal.

test reset

Test the javascript animation
div resize horizontally.

Div resizes vertically means the height attribute keeping changing during the setTimeout session.

if (settings.to.height == _this.start.height) { // x 
    
        var descend = (settings.to.width>_this.start.width) ? false : true; 
        var s = Math.min(_this.start.width,settings.to.width); 
        var d = Math.max(_this.start.width,settings.to.width); 
        _this.speed = (d -s)/settings.delay;
            for (i = s; i <= d; i++) { 
              var delay = (descend==true) ? (d-i)*settings.delay/(d - s) : (i-s)*settings.delay/(d - s);  
                
              (function(j) { 
                    setTimeout(function() { 
                         _this.style.width = j+_this.widthunit; 
                        if (descend==false&&j==s){
                            _this.style.display ="block";
                            if (callbk!=undefined) {callbk.call(_this);}          
                         }
                         if (descend==true&&j==s){
                            if (s==0) _this.style.display ="none";
                            if (callbk!=undefined) {callbk.call(_this);}
                         }
                          },delay); 
                })(i); 
            }     
    }

How to use?

The height attribute of the div (id = box4) is kept unchanged at 80px. Simply use one statement to resize the div horizontally.

$("box4").resize({delay:200,to:{width:0,height:80}});

$("box4").resize({delay:200,to:{width:400,height:80}});

Div resizes diagonally

Both width and height attributes are changed during the setTimeout session.

test reset

Test the javascript animation
div resize diagonally.

Here is code.

var descend = (settings.to.width>_this.start.width) ? false : true; 
        var s = Math.min(_this.start.width,settings.to.width); 
        var d = Math.max(_this.start.width,settings.to.width); 
        _this.speed = (d -s)/settings.delay;
    
       if (!_this.kk) _this.kk  = _this.start.height/_this.start.width;

            for (i = s; i <= d; i++) { 
              var delay = (descend==true) ? (d-i)*settings.delay/(d - s) : (i-s)*settings.delay/(d - s);  
                
              (function(j) { 
                    setTimeout(function() { 
                         _this.style.width = j+_this.widthunit; 
                          _this.style.height = _this.kk*j+_this.heightunit; 
                        if (descend==false&&j==s){
                            _this.style.display ="block";
                            if (callbk!=undefined) {callbk.call(_this);}          
                         }
                         if (descend==true&&j==s){
                            if (s==0) _this.style.display ="none";
                            if (callbk!=undefined) {callbk.call(_this);}
                         }
                          },delay); 
                })(i); 
            }

How to use?

We only need to know the width value of destination position and height value will be overlooked. So you don't need to assign height value.

$("box5").resize({delay:200,to:{width:0}});

$("box5").resize({delay:200,to:{width:400}});