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

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

Added Dojo 1.9.3 release.
File size: 2.1 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2    "http://www.w3.org/TR/html4/strict.dtd"
3    >
4<html lang="en">
5<head>
6    <title>Test dojox.fx.ext-dojo.reverse</title>
7        <style>
8                @import "../../../dijit/tests/css/dijitTests.css";
9                body{
10                        font-family:sans-serif;
11                }
12                p{
13                        width:700px;
14                        font-size:12px;
15                }
16                .wrap{
17                       
18                }
19                .lft{
20                        width:300px;
21                        height:300px;
22                        border:1px solid #666;
23                        position:relative;
24                        float:left;
25                }
26                #ball{
27                        width:50px;
28                        height:50px;
29                        margin:0px auto;
30                        top:125px;
31                        position:relative;
32                        border:1px solid #000;
33                        background:#0000ff;
34                }
35               
36        </style>
37
38                <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script>
39                <script>
40                        dojo.require("dojox.fx.ext-dojo.reverse");
41                        dojo.addOnLoad(function(){
42                                var ani = dojo.animateProperty({
43                                        node:dojo.byId("ball"),
44                                        duration:1000,
45                                        easing:dojo.fx.easing.bounceOut,
46                                        properties:{
47                                                width:{
48                                                        start:50,
49                                                        end:150,
50                                                        units:"px"
51                                                },
52                                                height:{
53                                                        start:50,
54                                                        end:150,
55                                                        units:"px"
56                                                },
57                                                top:{
58                                                        start:125,
59                                                        end:75,
60                                                        units:"px"
61                                                },
62                                                opacity:{
63                                                        start:1,
64                                                        end:.2
65                                                },
66                                                backgroundColor:{
67                                                        start:"#0000ff",
68                                                        end:"#ff0000"
69                                                }
70                                        }
71                                });
72                                ani.play();
73                               
74                                dojo.connect(dojo.byId("btn"), "click", function(){
75                                        ani.reverse();
76                                })
77                        });
78                       
79                </script>
80</head>
81<body>
82    <h1>Test dojo.fx.reverse</h1>
83        <p>
84                This is a test for the dojo.Animation extension, dojox.fx.ext-dojo.reverse.
85                To use, simply require <em>dojox.fx.ext-dojo.reverse</em> and a reverse() method
86                will be added to all dojo.Animations.
87        </p>
88        <p>
89                dojox.fx.ext-dojo.reverse can be used at any time during the animation. It does not
90                need to be called when it ends. It also reverses the easing &mdash; if dojo.fx.easing.quadIn
91                is used, dojo.fx.easing.quadOut will be used when animating backwards.
92        </p>
93        <button id="btn">Reverse</button>
94        <div class="wrap">
95                <div class="lft">
96                        <div id="ball"></div>
97                </div>
98        </div>
99</body>
100</html>
Note: See TracBrowser for help on using the repository browser.