Javascript Dynamic Scaling + fade-in

// Interval variable
Var inl = [];
// Original transparency
Var opa = 100;
// Judge the browser
Var ie = navigator. appName = "Microsoft Internet Explorer "? "Microsoft Internet Explorer ":"";
// Zoom out and open the button
Function gogo (){
Speed = 50;
Var mode;
// Use the display of the square to determine whether to zoom in or out.
If (! $ ('Tmp '). style. display ){
Mode = "-";
// If display is normal, set interval to narrow down
Inl ['suotu'] = setInterval ("suodi ('-')", 10 );
} Else {
Mode = "+ ";
// If display is none, change display back to normal first, and then set interval to zoom in.
$ ('Tmp '). style. display = "";
Inl ['suotu'] = setInterval ("suodi ('+')", 10 );
}
ClearInterval (inl ['dcdrs ']);
Inl ['dcdrs '] = setInterval ("dcdr ('" + mode + "')", 10 );
}
// Fade out
Function dcdr (op ){
// Obtain transparency
Opa = define (op, opa, 4, 0,100 );
// Update transparency
Ie? $ ('Tmp '). style. filter = "alpha (opacity =" + opa + ")": $ ('tmp'). style. opacity = opa/100;
// If the transparency is less than or equal to 0 or greater than or equal to 100
If (opa <= 0 | opa> = 100 ){
// Stop interval
ClearInterval (inl ['dcdrs ']);
}
}
Function define (id, a, B, a2, a3 ){
If (id = "-"){
A-= B;
If (a <= a2 ){
A = a2;
}
} Else {
A + = B;
If (a> = a3 ){
A = a3;
}
}
Return;
}
// Zoom in or out
Function suodi (opt ){
// If the speed is greater than 1, it is further divided by s; otherwise, it is equal to 1.
Speed = speed> 1? Speed * 0.862: 1;
// Obtain the height
Var hw = define (opt, $ ('tmp '). clientHeight, speed, speed, 300 );
// Set the height and width
$ ('Tmp '). style. height = hw + "px ";
$ ('Tmp '). style. width = hw + "px ";
// If the height of the square is smaller than the speed
If ($ ('tmp '). clientHeight <= speed ){
// Hide the square
$ ('Tmp '). style. display = "none ";
// Change the button name to "open"
$ ('Anniu'). value = "open ";
// Disable interval
ClearInterval (inl ['suotu']);
} Else if ($ ('tmp '). clientWidth> = 300 ){
// Change the button name to "zoom in"
$ ('Anniu'). value = "zoom out ";
// Disable interval
ClearInterval (inl ['suotu']);
}
}
// Simplify getElementById to $
Var $ = function ($ ){
Return document. getElementById ($ );
}
// Interval variable
Var inl = [];
// Original transparency
Var opa = 100;
// Judge the browser
Var ie = navigator. appName = "Microsoft Internet Explorer "? "Microsoft Internet Explorer ":"";
// Zoom out and open the button
Function gogo (){
Speed = 50;

Var mode;
// Use the display of the square to determine whether to zoom in or out.
If (! $ ('Tmp '). style. display ){
Mode = "-";
// If display is normal, set interval to narrow down
Inl ['suotu'] = setInterval ("suodi ('-')", 10 );
} Else {
Mode = "+ ";
// If display is none, change display back to normal first, and then set interval to zoom in.
$ ('Tmp '). style. display = "";
Inl ['suotu'] = setInterval ("suodi ('+')", 10 );
}
ClearInterval (inl ['dcdrs ']);
Inl ['dcdrs '] = setInterval ("dcdr ('" + mode + "')", 10 );
}
// Fade out
Function dcdr (op ){
// Obtain transparency
Opa = define (op, opa, 4, 0,100 );

// Update transparency
Ie? $ ('Tmp '). style. filter = "alpha (opacity =" + opa + ")": $ ('tmp'). style. opacity = opa/100;

// If the transparency is less than or equal to 0 or greater than or equal to 100
If (opa <= 0 | opa> = 100 ){
// Stop interval
ClearInterval (inl ['dcdrs ']);
}
}
Function define (id, a, B, a2, a3 ){
If (id = "-"){
A-= B;
If (a <= a2 ){
A = a2;
}
} Else {
A + = B;
If (a> = a3 ){
A = a3;
}
}
Return;
}
// Zoom in or out
Function suodi (opt ){
// If the speed is greater than 1, it is further divided by s; otherwise, it is equal to 1.
Speed = speed> 1? Speed * 0.862: 1;

// Obtain the height
Var hw = define (opt, $ ('tmp '). clientHeight, speed, speed, 300 );
// Set the height and width
$ ('Tmp '). style. height = hw + "px ";
$ ('Tmp '). style. width = hw + "px ";
// If the height of the square is smaller than the speed
If ($ ('tmp '). clientHeight <= speed ){
// Hide the square
$ ('Tmp '). style. display = "none ";
// Change the button name to "open"
$ ('Anniu'). value = "open ";
// Disable interval
ClearInterval (inl ['suotu']);
} Else if ($ ('tmp '). clientWidth> = 300 ){
// Change the button name to "zoom in"
$ ('Anniu'). value = "zoom out ";
// Disable interval
ClearInterval (inl ['suotu']);
}
}
// Simplify getElementById to $
Var $ = function ($ ){
Return document. getElementById ($ );
}

<Body style = "margin: 0; padding: 100px 150px" style = "margin: 0; padding: 100px 150px">
<Table style = "border: 1px solid # ccc" style = "border: 1px solid # ccc">
<Tr>
<Td> <div style = "position: absolute; font-family: ' '; font-size: 13px" style = "position: absolute; font-family:' '; font-size: 13px "> demo </div> <div id =" tmp "style =" height: 300px; width: 300px; background: black "> </div> </td>
</Tr>
<Tr>
<Td align = "center" style = "padding-top: 20px" style = "padding-top: 20px">
<Input id = "anniu" type = "button" value = "" style = "font-family: ' '; font-size: 12px; font-weight: bold; border: 1px solid # ccc "style =" font-family:' '; font-size: 12px; font-weight: bold; border: 1px solid # ccc "onfocus =" this. blur () "onclick =" gogo () "/>
</Td>
</Tr>
</Table>
</Body>Xmlns = "http://www.w3.org/1999/xhtml">

Demo