Ajax Layer JavaScript DHTML




Motion Example - Using a Control Point

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
body {
   margin:0;
   font:small arial;
}
h1 {
   color:#666;
   margin:0;
   font:bold 150% palatino, georgia;
}
#hd img {
   vertical-align:middle;
}
#hd h1 {
   display:inline;
   margin:0 0 0 20px;
   vertical-align:middle;
}
ul, li {
   margin:0;
   padding:0;
   list-style:none;
}
#doc {
   margin:10px;
}
#examples {
   margin:60px 40px;
}
#examples li {
   margin-bottom:1em;
}
#examples li a {
   color:#666;
   font:85% verdana;
}
#demo {
   background:#ccc;
   font:100%/1.2em arial;
   width:10px;
   height:10px;
}
#animation-demo-scroll #demo p {
   width:600px;
}
#animation-demo-motion #demo {
   color:yellow;
   font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
   background:#ccc;
   font:100%/1.2em arial;
   width:200px;
   height:200px;
}
#animation-demo-colors #demo {
   border:3px solid #c3c;
}
#animation-demo-scroll #demo {
   width:400px;
   height:200px;
   overflow:auto;
}
#animation-demo-colors #demo {
}
#target {
   background:red;
   font-size:0;
   position:absolute;
   left:300px;top:300px;
   width:10px;
   height:10px;
}






YAHOO.example.init = function() {   
   var attributes = {
      points: {
         to: YAHOO.util.Dom.getXY('target'),
         control: [100, 800]
      }
   };
   var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.bounceOut);
   YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
};
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);




   

Motion Example - Using a Control Point


   

This example demonstrates how to animate an element's position with a control point to create a curved path.


   

Click anywhere to start animation.


   
  
   




           
       
yui.zip( 3,714 k)