|
7 | 7 | <script src="../../../external/jquery/jquery.js"></script> |
8 | 8 | <script src="../../../ui/effect.js"></script> |
9 | 9 | <script src="../../../ui/effect-scale.js"></script> |
| 10 | + <script src="../../../ui/effect-size.js"></script> |
10 | 11 | <script> |
11 | 12 | $(function() { |
12 | 13 | var test = $( "#testBox" ), |
13 | 14 | opts = $( ".arg" ), |
14 | 15 | optsRev = $( opts.get().reverse() ), |
15 | 16 | doer = $( "#doAnim" ), |
16 | 17 | current = $( "#current" ), |
17 | | - cleanStyle = test[0].style, |
18 | 18 | total = 1; |
19 | 19 |
|
20 | 20 | opts.each(function() { |
|
34 | 34 | optsRev.each(function() { |
35 | 35 | var cur = this.selectedIndex, |
36 | 36 | next = cur + direction, |
37 | | - len = this.options.length; |
| 37 | + len = this.options.length, |
| 38 | + newIndex = ( next + len ) % len; |
38 | 39 |
|
39 | | - this.selectedIndex = ( next + len ) % len; |
| 40 | + this.selectedIndex = newIndex; |
40 | 41 |
|
41 | | - if ( ( next+len ) % len === next ) return false; |
| 42 | + if ( newIndex === next ) { |
| 43 | + return false; |
| 44 | + } |
42 | 45 | }); |
43 | 46 | doAnim(); |
44 | 47 | } |
45 | 48 |
|
46 | | - |
47 | 49 | function doAnim() { |
48 | 50 | var cur = 0; |
49 | 51 | opts.each(function() { |
50 | | - cur *= this.options.length |
| 52 | + cur *= this.options.length; |
51 | 53 | cur += this.selectedIndex; |
52 | 54 | }); |
53 | 55 | cur++; |
54 | 56 | current.text( "Configuration: " + cur + " of " + total ); |
55 | | - run.apply(test, opts.map(function() { |
56 | | - return $(this).val(); |
57 | | - }).get()); |
| 57 | + run.apply( test, opts.map(function() { |
| 58 | + return $( this ).val(); |
| 59 | + }).get() ); |
58 | 60 | } |
59 | 61 |
|
60 | 62 | function run( position, v, h, vo, ho ) { |
61 | 63 | var el = this, |
62 | | - style = el[0].style, |
| 64 | + style = el[ 0 ].style, |
63 | 65 | effect = { |
64 | 66 | effect: "scale", |
65 | 67 | mode: "effect", |
66 | 68 | percent: 200, |
67 | 69 | origin: [ vo, ho ], |
68 | 70 | duration: 500 |
69 | 71 | }; |
70 | | - el.stop(true, true); |
| 72 | + |
| 73 | + el.stop( true, true ); |
| 74 | + |
71 | 75 | if ( typeof style === "object" ) { |
72 | 76 | style.cssText = ""; |
73 | 77 | } else { |
74 | | - el[0].style = ""; |
| 78 | + el[ 0 ].style = ""; |
75 | 79 | } |
| 80 | + |
76 | 81 | el.css( "position", position ) |
77 | 82 | .css( h, 5 ) |
78 | 83 | .css( v, 5 ) |
|
95 | 100 | border: 10px solid #fff; |
96 | 101 | margin: 10px; |
97 | 102 | padding: 10px; |
| 103 | + position: absolute; |
| 104 | + left: 5px; |
| 105 | + top: 5px; |
98 | 106 | } |
99 | 107 | label { |
100 | 108 | display: block; |
|
111 | 119 | </style> |
112 | 120 | </head> |
113 | 121 | <body> |
| 122 | + |
114 | 123 | <div id="testArea"> |
115 | 124 | <div id="testBox"> |
116 | 125 | </div> |
|
154 | 163 | <button id="doAnim">Run Animation</button> |
155 | 164 | <button id="cycleNext">Forward</button> |
156 | 165 | </div> |
| 166 | + |
157 | 167 | </body> |
| 168 | +</html> |
0 commit comments