JavaScript DHTML/SmartClient/Animation

Материал из Web эксперт
Перейти к: навигация, поиск

Animation: minimize window

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Window.create({

   ID: "exampleWindow",
   width: 300,
   height: 100,
   title: "System status - all systems: Normal",
   canDragReposition: true,
   animateMinimize: true,
   items: [
       isc.HTMLFlow.create({
           padding:5,
           width: "100%",
           height: "100%",
           contents: "Staging: Normal
"+ "Production: Normal
"+ "Development: Normal
" }) ]

}); </SCRIPT> </BODY> </HTML>

 </source>
   
  


Animation: Move in and move out

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({

   ID:"messageBox",
   styleName:"exampleTitle", showEdges:true, padding:5,
   backgroundColor:"#ffffd0",
   valign:"center", align:"center",
   width:200, top:50, left:-220, // start off-screen    
   contents:"Vision is the art of seeing the invisible.",
   animateTime:1200 // milliseconds

}) isc.IButton.create({

   title:"Move in",
   click:"messageBox.animateMove(10,50)"

}) isc.IButton.create({

   title:"Move out", left:120,
   click:"messageBox.animateMove(-220,50)"

}) </SCRIPT> </BODY> </HTML>

 </source>
   
  


Animation: Show and hide

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HStack.create({

   ID:"starsLayout",
   top:50, membersMargin:10, layoutMargin:10, showEdges:true,
   animateMembers:true,
   members:[
       isc.Label.create({contents: "a", ID:"greenStar"}),
       isc.Label.create({contents: "asdf"}),
       isc.Label.create({contents: "asdf"})
   ]

}) isc.IButton.create({

   title:"Hide",
   iconOrientation:"right",
   click: "starsLayout.hideMember(greenStar)"

}) isc.IButton.create({

   title:"Show", left:120,
   iconOrientation:"right",
   click: "starsLayout.showMember(greenStar)"

}) </SCRIPT> </BODY> </HTML>

 </source>
   
  


Animation: slide in and slide out

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({

   ID:"messageBox",
   left:35, top:50, width:150,
   styleName:"exampleTitle", align:"center", valign:"center", padding:10, showEdges:true,
   contents:"Vision is the
art of seeing the invisible.", backgroundColor:"#ffffd0", visibility:"hidden", animateTime:1200

}) isc.IButton.create({

   title:"Show",
   click:"messageBox.animateShow("slide")"

}) isc.IButton.create({

   title:"Hide", left:120,
   click:"messageBox.animateHide("slide")"

}) </SCRIPT> </BODY> </HTML>

 </source>
   
  


Animation: Zoom in and zoom out

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({

   ID:"magnifier",
   src:"http://www.wbex.ru/style/logo.png",
   left:100, top:125, width:48, height:48,
   animateTime:500

}) isc.IButton.create({

   title:"Zoom",
   click:"magnifier.animateRect(0,50,248,248)"

}) isc.IButton.create({

   title:"Shrink", left:120,
   click:"magnifier.animateRect(100,125,48,48)"

})

</SCRIPT> </BODY> </HTML>

 </source>
   
  


Control the animation sequence

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({

   ID:"ajaxDefinition",
   top:50, width:75, height:45,
   overflow:"hidden", styleName:"exampleTextBlock", showEdges:true,
   contents:"Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)",
   animateTime:800

}) isc.IButton.create({

   ID:"expandBtn",
   title:"Expand",
   click: function () {
       this.disable();
       ajaxDefinition.animateResize(310,45,
           // this script will execute when the first part of the animation completes
           "ajaxDefinition.animateResize(310,195); collapseBtn.enable();"
       );
   }

}) isc.IButton.create({

   ID:"collapseBtn",
   title:"Collapse", left:120,
   disabled:true,
   click: function () {
       this.disable();
       ajaxDefinition.animateResize(310,45,
           // this script will execute when the first part of the animation completes
           "ajaxDefinition.animateResize(72,45); expandBtn.enable();"
       );
   }

}) </SCRIPT> </BODY> </HTML>

 </source>
   
  


Customized animation path: animateOrbit, animateOrbitStep

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({

   src:"http://www.wbex.ru/style/logo.png", 
   width:48, 
   height:48,
   top:0, left:100,
   animateOrbit : function () {
       isc.Animation.registerAnimation(this.animateOrbitStep, 2000, null, this);
   },
   animateOrbitStep : function (ratio) {
       var angle = (Math.PI*2)*ratio-(Math.PI/2);
       this.moveTo(Math.cos(angle)*100+100, Math.sin(angle)*100+100);
   },
   click: "this.animateOrbit()"

}) </SCRIPT> </BODY> </HTML>

 </source>
   
  


Expand and resize animation

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.HTMLFlow.create({

   ID:"ajaxDefinition",
   top:50, width:75, height:45,
   overflow:"hidden", styleName:"exampleTextBlock", showEdges:true,
   contents:"Ajax   Asynchronous JavaScript And XML (AJAX) is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page"s interactivity, speed, and usability. (Source: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank">Wikipedia</a>)",
   animateTime:800

}) isc.IButton.create({

   title:"Expand",
   click:"ajaxDefinition.animateResize(310,195);"

}) isc.IButton.create({

   title:"Collapse", left:120,
   click:"ajaxDefinition.animateResize(75,45);"

})

</SCRIPT> </BODY> </HTML>

 </source>
   
  


Image fade in and fade out

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Img.create({

   ID:"eyesImg",
   width:360, height:188,
   src:"http://www.wbex.ru/style/logo.png", 
   showEdges:true,
   animateTime:1200

}) isc.IButton.create({

   title:"Fade out", left:60, top:200,
   click:"eyesImg.animateFade(0)"

}) isc.IButton.create({

   title:"Fade in", left:200, top:200,
   click:"eyesImg.animateFade(100)"

})

</SCRIPT> </BODY> </HTML>

 </source>
   
  


Image zoom in and zoom out animation

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> var zoomedObject = null; isc.defineClass("ZoomImg", "Img").addProperties({

   width:48, height:48, appImgDir: "pieces/48/",
   zoomTime: 1000,
   shrinkTime: 300,
   click: function () {
       // remember original position
       if (this.originalLeft==null) this.originalLeft = this.left;
       if (!zoomedObject) { // nothing expanded, so just expand
           this.zoom();
       } else if (zoomedObject == this) { // already expanded, so just shrink
           this.shrink();
           zoomedObject = null;
       } else { // another object is expanded; shrink it and then expand this object
           zoomedObject.shrink(this.getID()+".zoom()");
       }
   },
   zoom: function () {
       this.animateRect(25, 100, 200, 200, null, this.zoomTime);
       zoomedObject = this;
   },
   shrink: function (postShrinkScript) {
       this.animateRect(this.originalLeft, 0, 48, 48, postShrinkScript, this.shrinkTime);
   }

}) isc.ZoomImg.create({left:0, src:"http://www.wbex.ru/style/logo.png"}) isc.ZoomImg.create({left:100, src:"http://www.wbex.ru/style/logo.png"}) isc.ZoomImg.create({left:200, src:"http://www.wbex.ru/style/logo.png"})

</SCRIPT> </BODY> </HTML>

 </source>
   
  


SmartClient animation programming

   <source lang="html4strict">


<HTML> <HEAD> <TITLE>SmartClient animation programming</TITLE>

   <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>

</HEAD><BODY bgcolor=tan><SCRIPT> // // SmartClient animation programming // // Demonstrates the following public methods for component animations: // // animateMove (left, top, callback, time, acceleration) // animateResize (width, height, callback, time, acceleration) // animateRect (left, top, width, height, callback, time, acceleration) // animateFade (opacity, callback, time, acceleration) // animateShow (slideIn, callback, time, acceleration) // animateHide (slideOut, callback, time, acceleration) // animateScroll (scrollLeft, scrollTop, callback, time, acceleration) // // // interval 20ms = 50fps isc.Animation.interval = 20; Canvas.create({

   ID:"dest",
   overflow:"hidden",
   align:"center",
   showEdges:true,
   edgeSize:5,
   edgeImage:"[SKIN]/rounded/frame/FFFFFF/5.png",
   backgroundColor:"#FFFFA0",
   canDragReposition:true,
   dragRepositionStop:"this.sendToBack()",
   canDragResize:true,
   dragResizeStop:"this.sendToBack()",
   dragAppearance:"target",
   contents:"Destination (drag to move or resize)",
   left:400, top:200, width:200, height:200

}) Canvas.create({

   ID:"anim",
   overflow:"hidden",
   border:"1px solid black",
   backgroundColor:"#A0FFA0",
   canDragReposition:true,
   canDragResize:true,
   dragAppearance:"target",
   smoothFade:true,
   contents:"1
2
3
Animated Object (drag to move or resize)
3
2
1", left:100, top:250, width:100, height:100

}) var numberStackHTML = "0"; for (i=1; i<100; i++) numberStackHTML += "
"+i; HTMLPane.create({

   ID:"scroller",
   showEdges:true,
   edgeSize:5,
   edgeImage:"[SKIN]/rounded/frame/FFFFFF/5.png",
   backgroundColor:"#D0D0FF",
   canDragReposition:true,
   canDragResize:true,
   dragAppearance:"target",
   contents:numberStackHTML,
   left:640, top:10, width:100, height:160

}) Slider.create({

   ID:"timeSlider",
   left:20, top:0, width:550,
   vertical:false,
   value:1000,
   minValue:250,
   maxValue:4000,
   numValues:16,
   title:"Duration (ms)",
   animateThumb:true,
   animateThumbInit:true

}) Button.create({

   left:260, top:150,
   title:"Reset",
   click: function () {
       anim.setRect(100,250,100,100);
       anim.setOpacity(100);
       anim.scrollTo(0,0);
       anim.show();
       dest.setRect(400,200,200,200);
       scroller.setRect(640,10,100,160);
       scroller.scrollTo(0,0);
   }

}) Button.create({

   left:20, top:80,
   title:"Move",
   click: function () {anim.animateMove(
       dest.getLeft(),
       dest.getTop(),
       null,
       timeSlider.getValue()
   )}

}) Button.create({

   left:20, top:110,
   title:"Resize",
   click: function () {anim.animateResize(
       dest.getWidth(),
       dest.getHeight(),
       null,
       timeSlider.getValue()
   )}

}) Button.create({

   left:140, top:80,
   title:"Move & Resize",
   click: function () {anim.animateRect(
       dest.getLeft(),
       dest.getTop(),
       dest.getWidth(),
       dest.getHeight(),
       null,
       timeSlider.getValue()
   )}

}) Button.create({

   left:140, top:110,
   title:"Move, Resize",
   click: function () {anim.animateMove(
       dest.getLeft(),
       dest.getTop(),
       "anim.animateResize(dest.getWidth(),dest.getHeight(),null,timeSlider.getValue())",
       timeSlider.getValue()
   )}

}) Button.create({

   left:260, top:80,
   title:"Fade out",

// click: function () {anim.animateFade(0, null, timeSlider.getValue())}

   click: function () {anim.animateHide("fade", null, timeSlider.getValue())}

}) Button.create({

   left:260, top:110,
   title:"Fade in",

// click: function () {anim.animateFade(100, null, timeSlider.getValue())}

   click: function () {anim.animateShow("fade", null, timeSlider.getValue())}    

}) Button.create({

   left:380, top:80,
   title:"Slide out",
   click: function () {anim.animateHide("slide", null, timeSlider.getValue())}

}) Button.create({

   left:380, top:110,
   title:"Slide in",
   click: function () {anim.animateShow("slide", null, timeSlider.getValue())}

}) Button.create({

   left:500, top:80,
   title:"Wipe out",
   click: function () {anim.animateHide("wipe", null, timeSlider.getValue())}

}) Button.create({

   left:500, top:110,
   title:"Wipe in",
   click: function () {anim.animateShow("wipe", null, timeSlider.getValue())}

}) Button.create({

   left:760, top:50,
   title:"Scroll top",
   click: function () {scroller.animateScroll(0, 0, null, timeSlider.getValue())}

}) Button.create({

   left:760, top:80,
   title:"Scroll middle",
   click: function () {scroller.animateScroll(0, (scroller.getScrollHeight()-scroller.getHeight())/2, null, timeSlider.getValue())}

}) Button.create({

   left:760, top:110,
   title:"Scroll end",
   click: function () {scroller.animateScroll(0, scroller.getScrollBottom(), null, timeSlider.getValue())}

}) FormLayout.create({

   left:150, top:550, width:300, backgroundColor:"white", border:"1px solid black",
   titlePrefix:"", titleSuffix:"",
   items:[
       {name:"Acceleration", type:"radioGroup", 
           valueMap:["smoothStart", "smoothEnd", "smoothStartEnd", "none", "custom"],
           defaultValue:"smoothEnd",
           change:function (form, item, value, oldValue) {
               if (value == "custom") {
                   // custom acceleration function
                   isc.Canvas.addProperties({
                       animateAcceleration:function(ratio) { return Math.pow(ratio, 6) }
                   });
               } else {
                   // built-in acceleration functions
                   isc.Canvas.addProperties({animateAcceleration:value})
               }
           }
       }
   ]

})

</SCRIPT></BODY></HTML>

 </source>
   
  


Wipe in and wipe out

   <source lang="html4strict">


<HTML><HEAD>

 <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
   <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Label.create({

   ID:"messageBox",
   left:35, top:50, width:150,
   styleName:"exampleTitle", align:"center", valign:"center", padding:10, showEdges:true,
   contents:"Vision is the
art of seeing the invisible.", backgroundColor:"#ffffd0", visibility:"hidden", animateTime:1200

}) isc.IButton.create({

   title:"Show",
   click:"messageBox.animateShow("wipe")"

}) isc.IButton.create({

   title:"Hide", left:120,
   click:"messageBox.animateHide("wipe")"

})

</SCRIPT> </BODY> </HTML>

 </source>