source: Dev/trunk/src/client/dojox/fx/tests/test_easing.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 3.0 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>dojox.fx.easing functions:</title>
6               
7        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script>
8        <style type="text/css">
9                @import "../../../dojo/resources/dojo.css";
10                @import "../../../dijit/themes/dijit.css";
11                @import "../../../dijit/themes/tundra/tundra.css";
12                @import "../../../dijit/tests/css/dijitTests.css";
13
14                .bounce {
15                        position:absolute;
16                        top:300px;
17                        left:400px;
18                        width:25px;
19                        height:25px;
20                        border:1px solid #b7b7b7;
21                        background:#ededed;
22                }
23
24                .block {
25                        width:200px;
26                        height:100px;
27                        background:#666;
28                        border:1px solid #ccc;
29                        display:block;
30                        color:#fff;
31                        text-align:center;
32                }
33       
34        </style>
35        <script type="text/javascript">
36                dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
37                dojo.require("dojo.fx.easing");
38
39
40                var allAnim = null;
41                dojo.addOnLoad(function(){
42
43                var easeInAnim = dojo.fx.chain([
44                        dojo.fadeOut({
45                                node: 'easeIn',
46                                duration:2000,
47                                easing: dojo.fx.easing.easeIn
48                        }),
49                        dojo.fadeIn({   
50                                node: 'easeIn',
51                                duration:2000,
52                                easing: dojo.fx.easing.easeIn
53                        })
54                ]);
55
56
57                var easeOutAnim = dojo.fx.chain([
58                        dojo.fadeOut({
59                                node: 'easeOut',
60                                duration:2000,
61                                easing: dojo.fx.easing.easeOut
62                        }),
63                        dojo.fadeIn({   
64                                node: 'easeOut',
65                                duration:2000,
66                                easing: dojo.fx.easing.easeOut
67                        })
68                ]);
69
70                var easeInOutAnim = dojo.fx.chain([
71                        dojo.fadeOut({
72                                node: 'easeInOut',
73                                duration:2000
74                        }),
75                        dojo.fadeIn({   
76                                node: 'easeInOut',
77                                duration:2000
78                        })
79                ]);
80
81                var linearEaseAnim = dojo.fx.chain([
82                        dojo.fadeOut({
83                                node: 'linearEase',
84                                duration:2000,
85                                easing: dojo.fx.easing.linear
86                        }),
87                        dojo.fadeIn({
88                                node: 'linearEase',
89                                duration:2000,
90                                easing: dojo.fx.easing.linear
91                        })
92                ]);
93
94                dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
95                dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
96                dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
97                dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play");
98
99                allAnim = { play: function(){
100                        easeInAnim.play();
101                        easeOutAnim.play();
102                        easeInOutAnim.play();
103                        linearEaseAnim.play();
104                        }
105                };
106
107                }); // dojo.addOnLoad
108        </script>
109</head>
110<body class="tundra">
111
112        <h1 class="testTitle">dojox.fx.easing function tests:</h1>
113
114        (click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
115
116        <div id="easeIn" class="block">dojo.fx.easing.easeIn</div>
117        <br><br>
118        <div id="easeOut" class="block">dojo.fx.easing.easeOut</div>
119        <br><br>
120        <div id="linearEase" class="block">dojo.fx.easing.linear</div>
121        <br><br>
122        <div id="easeInOut" class="block">dojo default easing</div>
123       
124        <p>
125        dojo.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart
126        of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a>
127        </p>   
128
129</body>
130</html>
Note: See TracBrowser for help on using the repository browser.