Skip to content

Commit 44a086b

Browse files
scottgonzalezscottgonzalez
committed
Visual tests: Effects cleanup.
1 parent 1f24692 commit 44a086b

File tree

5 files changed

+118
-125
lines changed

5 files changed

+118
-125
lines changed

‎tests/visual/effects/effects.all.html renamed to ‎tests/visual/effects/all.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>jQuery UI Effects Test Suite</title>
6-
<link rel="stylesheet" href="effects.all.css" type="text/css">
6+
<link rel="stylesheet" href="effects.css">
77
<script src="../../../jquery-1.7.2.js"></script>
88
<script src="../../../ui/jquery.effects.core.js"></script>
99
<script src="../../../ui/jquery.effects.blind.js"></script>
@@ -19,7 +19,7 @@
1919
<script src="../../../ui/jquery.effects.shake.js"></script>
2020
<script src="../../../ui/jquery.effects.slide.js"></script>
2121
<script src="../../../ui/jquery.effects.transfer.js"></script>
22-
<script src="effects.all.js"></script>
22+
<script src="effects.js"></script>
2323
</head>
2424
<body>
2525

@@ -186,19 +186,19 @@
186186
<p>Transfer to first element</p>
187187
</div>
188188
</li>
189-
189+
190190
<li>
191191
<div class="effect" id="addClass">
192192
<p>addClass</p>
193193
</div>
194194
</li>
195-
195+
196196
<li>
197197
<div class="effect" id="removeClass">
198198
<p>removeClass</p>
199199
</div>
200200
</li>
201-
201+
202202
<li>
203203
<div class="effect" id="toggleClass">
204204
<p>toggleClass</p>

‎tests/visual/effects/effects.all.js

Lines changed: 0 additions & 106 deletions
This file was deleted.

‎tests/visual/effects/effects.all.css renamed to ‎tests/visual/effects/effects.css

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
2-
body,html {
3-
margin: 0;
1+
body {
2+
margin: 1em;
43
padding: 0;
5-
font-size: 12px;
6-
font-family: Arial;
74
background: #191919;
85
color: #fff;
96
}
10-
body { margin: 1em; }
117

128
ul.effects {
139
list-style-type: none;
@@ -16,8 +12,6 @@ ul.effects {
1612
}
1713

1814
ul.effects li {
19-
list-style-type: none;
20-
margin: 0;
2115
padding: 0;
2216
width: 120px;
2317
height: 100px;
@@ -44,7 +38,7 @@ div.current {
4438
div.effect p {
4539
color: #191919;
4640
font-weight: bold;
47-
margin: 0px;
41+
margin: 0;
4842
padding: 10px;
4943
}
5044

‎tests/visual/effects/effects.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
$(function() {
2+
3+
var duration = 1000,
4+
wait = 500;
5+
6+
function effect( elem, name, options ) {
7+
$.extend( options, {
8+
easing: "easeOutQuint"
9+
});
10+
11+
$( elem ).click(function() {
12+
$( this )
13+
.addClass( "current" )
14+
// delaying the initial animation makes sure that the queue stays in tact
15+
.delay( 10 )
16+
.hide( name, options, duration )
17+
.delay( wait )
18+
.show( name, options, duration, function() {
19+
$( this ).removeClass( "current" );
20+
});
21+
});
22+
}
23+
24+
$( "#hide" ).click(function() {
25+
$( this )
26+
.addClass( "current" )
27+
.hide( duration )
28+
.delay( wait )
29+
.show( duration, function() {
30+
$( this ).removeClass( "current" );
31+
});
32+
});
33+
34+
effect( "#blindLeft", "blind", { direction: "left" } );
35+
effect( "#blindUp", "blind", { direction: "up" } );
36+
effect( "#blindRight", "blind", { direction: "right" } );
37+
effect( "#blindDown", "blind", { direction: "down" } );
38+
39+
effect( "#bounce3times", "bounce", { times: 3 } );
40+
41+
effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
42+
effect( "#clipVertically", "clip", { direction: "vertical" } );
43+
44+
effect( "#dropDown", "drop", { direction: "down" } );
45+
effect( "#dropUp", "drop", { direction: "up" } );
46+
effect( "#dropLeft", "drop", { direction: "left" } );
47+
effect( "#dropRight", "drop", { direction: "right" } );
48+
49+
effect( "#explode9", "explode", {} );
50+
effect( "#explode36", "explode", { pieces: 36 } );
51+
52+
effect( "#fade", "fade", {} );
53+
54+
effect( "#fold", "fold", { size: 50 } );
55+
56+
effect( "#highlight", "highlight", {} );
57+
58+
effect( "#pulsate", "pulsate", { times: 2 } );
59+
60+
effect( "#puff", "puff", { times: 2 } );
61+
effect( "#scale", "scale", {} );
62+
effect( "#size", "size", {} );
63+
$( "#sizeToggle" ).click(function() {
64+
var options = { to: { width: 300, height: 300 } };
65+
$( this )
66+
.addClass( "current" )
67+
.toggle( "size", options, duration )
68+
.delay( wait )
69+
.toggle( "size", options, duration, function() {
70+
$( this ).removeClass( "current" );
71+
});
72+
});
73+
74+
$( "#shake" ).click(function() {
75+
$( this )
76+
.addClass( "current" )
77+
.effect( "shake", {}, 100, function() {
78+
$( this ).removeClass( "current" );
79+
});
80+
});
81+
82+
effect( "#slideDown", "slide", { direction: "down" } );
83+
effect( "#slideUp", "slide", { direction: "up" } );
84+
effect( "#slideLeft", "slide", { direction: "left" } );
85+
effect( "#slideRight", "slide", { direction: "right" } );
86+
87+
$( "#transfer" ).click(function() {
88+
$( this )
89+
.addClass( "current" )
90+
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
91+
$( this ).removeClass( "current" );
92+
});
93+
});
94+
95+
$( "#addClass" ).click(function() {
96+
$( this ).addClass( "current", duration, function() {
97+
$( this ).removeClass( "current" );
98+
});
99+
});
100+
$( "#removeClass" ).click(function() {
101+
$( this ).addClass( "current" ).removeClass( "current", duration );
102+
});
103+
$( "#toggleClass" ).click(function() {
104+
$( this ).toggleClass( "current", duration );
105+
});
106+
107+
});

‎tests/visual/effects/effects.scale.html renamed to ‎tests/visual/effects/scale.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
<head>
44
<meta charset="utf-8">
55
<title>jQuery UI Effects Test Suite</title>
6-
<link rel="stylesheet" href="effects.all.css" type="text/css">
6+
<link rel="stylesheet" href="effects.css">
77
<script src="../../../jquery-1.7.2.js"></script>
88
<script src="../../../ui/jquery.effects.core.js"></script>
99
<script src="../../../ui/jquery.effects.scale.js"></script>
10-
<script src="effects.all.js"></script>
1110
<script>
12-
jQuery(function( $ ) {
11+
$(function() {
1312
var test = $( "#testBox" ),
1413
opts = $( ".arg" ),
1514
optsRev = $( opts.get().reverse() ),
@@ -82,9 +81,8 @@
8281
}
8382
});
8483
</script>
85-
<style type="text/css">
84+
<style>
8685
#testArea {
87-
/* border: 5px dashed #777;*/
8886
width: 200px;
8987
height: 200px;
9088
position: relative;

0 commit comments

Comments
 (0)