visual/effects/scale.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>jQuery UI Effects Test Suite</title>
        <link rel="stylesheet" href="effects.css">
        <script src="../../../jquery-1.9.1.js"></script>
        <script src="../../../ui/jquery.ui.effect.js"></script>
        <script src="../../../ui/jquery.ui.effect-scale.js"></script>
        <script>
        $(function() {
                var test = $( "#testBox" ),
                        opts = $( ".arg" ),
                        optsRev = $( opts.get().reverse() ),
                        doer = $( "#doAnim" ),
                        current = $( "#current" ),
                        cleanStyle = test[0].style,
                        total = 1;

                opts.each(function() {
                        total *= this.options.length;
                });

                opts.change( doAnim );
                doer.click( doAnim );
                $( "#cyclePrev" ).click(function() {
                        cycle( -1 );
                });
                $( "#cycleNext" ).click(function() {
                        cycle( 1 );
                });

                function cycle( direction ) {
                        optsRev.each(function() {
                                var cur = this.selectedIndex,
                                        next = cur + direction,
                                        len = this.options.length;

                                this.selectedIndex = ( next + len ) % len;

                                if ( ( next+len ) % len === next ) return false;
                        });
                        doAnim();
                }


                function doAnim() {
                        var cur = 0;
                        opts.each(function() {
                                cur *= this.options.length
                                cur += this.selectedIndex;
                        });
                        cur++;
                        current.text( "Configuration: " + cur + " of " + total );
                        run.apply(test, opts.map(function() {
                                return $(this).val();
                        }).get());
                }

                function run( position, v, h, vo, ho ) {
                        var el = this,
                                style = el[0].style,
                                effect = {
                                        effect: "scale",
                                        mode: "effect",
                                        percent: 200,
                                        origin: [ vo, ho ],
                                        duration: 500
                                };
                        el.stop(true, true);
                        if ( typeof style === "object" ) {
                                style.cssText = "";
                        } else {
                                el[0].style = "";
                        }
                        el.css( "position", position )
                                .css( h, 5 )
                                .css( v, 5 )
                                .delay( 100 )
                                .effect( effect );
                }
        });
        </script>
        <style>
        #testArea {
                width: 200px;
                height: 200px;
                position: relative;
        }
        #testBox {
                width: 50px;
                height: 50px;
                background-color: #bada55;
                color: black;
                border: 10px solid #fff;
                margin: 10px;
                padding: 10px;
        }
        label {
                display: block;
        }
        #controls {
                position: absolute;
                z-index: 300;
                left: 50%;
                top: 50%;
                margin-left: -200px;
                width: 400px;
                opacity: 0.8;
        }
        </style>
</head>
<body>
        <div id="testArea">
                <div id="testBox">
                </div>
        </div>
        <div id="controls">
                <label for="pos">Positioning
                        <select id="pos" class="arg">
                                <option value="absolute">absolute</option>
                                <option value="relative">relative</option>
                                <option value="fixed">fixed</option>
                        </select>
                </label>
                <label for="vertPos">Vertical Positioning
                        <select id="vertPos" class="arg">
                                <option value="top">top</option>
                                <option value="bottom">bottom</option>
                        </select>
                </label>
                <label for="horizPos">Horizontal Positioning
                        <select id="horizPos" class="arg">
                                <option value="left">left</option>
                                <option value="right">right</option>
                        </select>
                </label>
                <label for="vertOrigin">Vertical Origin
                        <select id="vertOrigin" class="arg">
                                <option value="top">top</option>
                                <option value="middle">middle</option>
                                <option value="bottom">bottom</option>
                        </select>
                </label>
                <label for="horizOrigin">Horizontal Origin
                        <select id="horizOrigin" class="arg">
                                <option value="left">left</option>
                                <option value="center">center</option>
                                <option value="right">right</option>
                        </select>
                </label><br />
                <label id="current">jQuery UI Scale Animation Test</label>
                <button id="cyclePrev">Back</button>
                <button id="doAnim">Run Animation</button>
                <button id="cycleNext">Forward</button>
        </div>
</body>
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>jQuery UI Effects Test Suite</title>
6	<link rel="stylesheet" href="effects.css">
7	<script src="../../../jquery-1.9.1.js"></script>
8	<script src="../../../ui/jquery.ui.effect.js"></script>
9	<script src="../../../ui/jquery.ui.effect-scale.js"></script>
10	<script>
11	$(function() {
12	var test = $( "#testBox" ),
13	opts = $( ".arg" ),
14	optsRev = $( opts.get().reverse() ),
15	doer = $( "#doAnim" ),
16	current = $( "#current" ),
17	cleanStyle = test[0].style,
18	total = 1;
19
20	opts.each(function() {
21	total *= this.options.length;
22	});
23
24	opts.change( doAnim );
25	doer.click( doAnim );
26	$( "#cyclePrev" ).click(function() {
27	cycle( -1 );
28	});
29	$( "#cycleNext" ).click(function() {
30	cycle( 1 );
31	});
32
33	function cycle( direction ) {
34	optsRev.each(function() {
35	var cur = this.selectedIndex,
36	next = cur + direction,
37	len = this.options.length;
38
39	this.selectedIndex = ( next + len ) % len;
40
41	if ( ( next+len ) % len === next ) return false;
42	});
43	doAnim();
44	}
45
46
47	function doAnim() {
48	var cur = 0;
49	opts.each(function() {
50	cur *= this.options.length
51	cur += this.selectedIndex;
52	});
53	cur++;
54	current.text( "Configuration: " + cur + " of " + total );
55	run.apply(test, opts.map(function() {
56	return $(this).val();
57	}).get());
58	}
59
60	function run( position, v, h, vo, ho ) {
61	var el = this,
62	style = el[0].style,
63	effect = {
64	effect: "scale",
65	mode: "effect",
66	percent: 200,
67	origin: [ vo, ho ],
68	duration: 500
69	};
70	el.stop(true, true);
71	if ( typeof style === "object" ) {
72	style.cssText = "";
73	} else {
74	el[0].style = "";
75	}
76	el.css( "position", position )
77	.css( h, 5 )
78	.css( v, 5 )
79	.delay( 100 )
80	.effect( effect );
81	}
82	});
83	</script>
84	<style>
85	#testArea {
86	width: 200px;
87	height: 200px;
88	position: relative;
89	}
90	#testBox {
91	width: 50px;
92	height: 50px;
93	background-color: #bada55;
94	color: black;
95	border: 10px solid #fff;
96	margin: 10px;
97	padding: 10px;
98	}
99	label {
100	display: block;
101	}
102	#controls {
103	position: absolute;
104	z-index: 300;
105	left: 50%;
106	top: 50%;
107	margin-left: -200px;
108	width: 400px;
109	opacity: 0.8;
110	}
111	</style>
112	</head>
113	<body>
114	<div id="testArea">
115	<div id="testBox">
116	</div>
117	</div>
118	<div id="controls">
119	<label for="pos">Positioning
120	<select id="pos" class="arg">
121	<option value="absolute">absolute</option>
122	<option value="relative">relative</option>
123	<option value="fixed">fixed</option>
124	</select>
125	</label>
126	<label for="vertPos">Vertical Positioning
127	<select id="vertPos" class="arg">
128	<option value="top">top</option>
129	<option value="bottom">bottom</option>
130	</select>
131	</label>
132	<label for="horizPos">Horizontal Positioning
133	<select id="horizPos" class="arg">
134	<option value="left">left</option>
135	<option value="right">right</option>
136	</select>
137	</label>
138	<label for="vertOrigin">Vertical Origin
139	<select id="vertOrigin" class="arg">
140	<option value="top">top</option>
141	<option value="middle">middle</option>
142	<option value="bottom">bottom</option>
143	</select>
144	</label>
145	<label for="horizOrigin">Horizontal Origin
146	<select id="horizOrigin" class="arg">
147	<option value="left">left</option>
148	<option value="center">center</option>
149	<option value="right">right</option>
150	</select>
151	</label><br />
152	<label id="current">jQuery UI Scale Animation Test</label>
153	<button id="cyclePrev">Back</button>
154	<button id="doAnim">Run Animation</button>
155	<button id="cycleNext">Forward</button>
156	</div>
157	</body>