1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
8 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
9 <script type='text/javascript'>
\r
10 var div1,div2,enlarge=true,fadeOut=true,moveRight=true;
\r
11 Rico.onLoad( function() {
\r
12 Rico.Corner.round('effect_object_r');
\r
13 div1=Rico.$('effect_object');
14 div2=Rico.$('effect_object_r');
17 function animateSize() {
\r
18 var newsize=enlarge ? 240 : 120;
\r
20 Rico.animate(div1,{duration:500},{width:newsize});
\r
21 Rico.animate(div2,{duration:500},{width:newsize});
\r
24 function animateFade() {
\r
26 Rico.fadeOut(div1,500);
\r
27 Rico.fadeOut(div2,500);
\r
29 Rico.fadeIn(div1,500);
\r
30 Rico.fadeIn(div2,500);
\r
35 function animatePosition() {
\r
36 var newpos=moveRight ? 400 : 0;
\r
37 moveRight=!moveRight;
\r
38 Rico.animate(div1,{duration:500},{left:newpos});
\r
39 Rico.animate(div2,{duration:500},{left:newpos});
\r
42 function animateSizeAndPosition() {
\r
43 var newsize=enlarge ? 240 : 120;
\r
45 var newpos=moveRight ? 400 : 0;
\r
46 moveRight=!moveRight;
\r
47 Rico.animate(div1,{duration:500},{width:newsize,left:newpos});
\r
48 Rico.animate(div2,{duration:500},{width:newsize,left:newpos});
\r
51 function animatePositionAndFade() {
\r
52 var newopacity=fadeOut ? 0 : 1;
\r
54 var newpos=moveRight ? 400 : 0;
\r
55 moveRight=!moveRight;
\r
56 Rico.animate(div1,{duration:500},{opacity:newopacity,left:newpos});
\r
57 Rico.animate(div2,{duration:500},{opacity:newopacity,left:newpos});
\r
61 <link href="../demo.css" type="text/css" rel="stylesheet">
\r
62 <style type="text/css">
\r
65 background-color : #c6c3de;
\r
67 padding-bottom : 10px;
\r
68 font-family : Arial;
\r
71 position : absolute;
\r
82 <h1>Rico Animation & Effects</h1>
84 <p id='libname'>Base Library:
\r
85 <script type='text/javascript'>
\r
86 document.write(Rico.Lib+' '+Rico.LibVersion);
\r
94 <td><button onclick="animateSize();">Animate Size</button>
95 <td><button onclick="animateFade();">Fade Out/Fade In</button>
\r
98 <td><button onclick="animatePosition();">Animate Position</button>
99 <td><button onclick="animateSizeAndPosition();">Animate Position & Size</button>
\r
100 <td><button onclick="animatePositionAndFade();">Animate Position & Fade</button>
\r
106 <div id="effect_object" class="sizeMe" style="border: 6px solid black;">
107 <div style="height:50px; background-color:red;">Inner div content
111 <p style="height:100px;">
113 <div id="effect_object_r" class="sizeMe">
114 <div style="height:50px; background-color:red;">Inner div content