Skip to content

Commit cecc483

Browse files
rdworthrdworth
committed
Added effects visual test pages
1 parent 6e4092f commit cecc483

3 files changed

Lines changed: 279 additions & 0 deletions

File tree

‎tests/visual/effects.all.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body,html {
2+
margin: 0;
3+
padding: 0;
4+
font-size: 12px;
5+
font-family: Arial;
6+
background: #000;
7+
}
8+
9+
ul.effects {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
ul.effects li {
15+
margin: 0;
16+
padding: 0;
17+
width: 120px;
18+
height: 100px;
19+
float: left;
20+
margin-top: 20px;
21+
margin-left: 20px;
22+
}
23+
24+
div.effect {
25+
width: 120px;
26+
height: 100px;
27+
background: #333;
28+
border: 5px outset #aaa;
29+
float: left;
30+
cursor: pointer;
31+
cursor: hand;
32+
}
33+
34+
div.current {
35+
border: 5px outset #FF0000;
36+
background: #660000;
37+
}
38+
39+
div.effect p {
40+
color: #eee;
41+
margin: 0px;
42+
padding: 10px;
43+
}
44+
45+
.ui-effects-transfer {
46+
border: 1px dotted #fff;
47+
background: #666;
48+
opacity: 0.5;
49+
}

‎tests/visual/effects.all.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5+
<title>Effects Test Suite</title>
6+
<link rel="stylesheet" href="effects.all.css" type="text/css" media="screen" title="no title" charset="utf-8" />
7+
8+
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
9+
<script type="text/javascript" src="../../ui/effects.core.js"></script>
10+
11+
<script type="text/javascript" src="../../ui/effects.blind.js"></script>
12+
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
13+
<script type="text/javascript" src="../../ui/effects.clip.js"></script>
14+
<script type="text/javascript" src="../../ui/effects.drop.js"></script>
15+
<script type="text/javascript" src="../../ui/effects.explode.js"></script>
16+
<script type="text/javascript" src="../../ui/effects.fold.js"></script>
17+
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
18+
<script type="text/javascript" src="../../ui/effects.pulsate.js"></script>
19+
<script type="text/javascript" src="../../ui/effects.scale.js"></script>
20+
<script type="text/javascript" src="../../ui/effects.shake.js"></script>
21+
<script type="text/javascript" src="../../ui/effects.slide.js"></script>
22+
<script type="text/javascript" src="../../ui/effects.transfer.js"></script>
23+
24+
<script type="text/javascript" src="effects.all.js"></script>
25+
</head>
26+
<body>
27+
28+
<ul class="effects">
29+
30+
<li>
31+
<div class="effect" id="blindHorizontally">
32+
<p>Blind horizontally</p>
33+
</div>
34+
</li>
35+
36+
<li>
37+
<div class="effect" id="blindVertically">
38+
<p>Blind vertically</p>
39+
</div>
40+
</li>
41+
42+
<li>
43+
<div class="effect" id="bounce3times">
44+
<p>Bounce 3 times</p>
45+
</div>
46+
</li>
47+
48+
<li>
49+
<div class="effect" id="clipHorizontally">
50+
<p>Clip horizontally</p>
51+
</div>
52+
</li>
53+
54+
<li>
55+
<div class="effect" id="clipVertically">
56+
<p>Clip vertically</p>
57+
</div>
58+
</li>
59+
60+
<li>
61+
<div class="effect" id="dropDown">
62+
<p>Drop down</p>
63+
</div>
64+
</li>
65+
66+
<li>
67+
<div class="effect" id="dropUp">
68+
<p>Drop up</p>
69+
</div>
70+
</li>
71+
72+
<li>
73+
<div class="effect" id="dropLeft">
74+
<p>Drop left</p>
75+
</div>
76+
</li>
77+
78+
<li>
79+
<div class="effect" id="dropRight">
80+
<p>Drop right</p>
81+
</div>
82+
</li>
83+
84+
<li>
85+
<div class="effect" id="explode9">
86+
<p>Explode in 9 pieces</p>
87+
</div>
88+
</li>
89+
90+
<li>
91+
<div class="effect" id="explode36">
92+
<p>Explode in 36 pieces</p>
93+
</div>
94+
</li>
95+
96+
<li>
97+
<div class="effect" id="fold">
98+
<p>Fold</p>
99+
</div>
100+
</li>
101+
102+
<li>
103+
<div class="effect" id="highlight">
104+
<p>Highlight</p>
105+
</div>
106+
</li>
107+
108+
<li>
109+
<div class="effect" id="pulsate">
110+
<p>Pulsate 2 times</p>
111+
</div>
112+
</li>
113+
114+
<li>
115+
<div class="effect" id="puff">
116+
<p>Puff</p>
117+
</div>
118+
</li>
119+
120+
<li>
121+
<div class="effect" id="scale">
122+
<p>Scale</p>
123+
</div>
124+
</li>
125+
126+
<li>
127+
<div class="effect" id="shake">
128+
<p>Shake</p>
129+
</div>
130+
</li>
131+
132+
<li>
133+
<div class="effect" id="slideDown">
134+
<p>Slide down</p>
135+
</div>
136+
</li>
137+
138+
<li>
139+
<div class="effect" id="slideUp">
140+
<p>Slide up</p>
141+
</div>
142+
</li>
143+
144+
<li>
145+
<div class="effect" id="slideLeft">
146+
<p>Slide left</p>
147+
</div>
148+
</li>
149+
150+
<li>
151+
<div class="effect" id="slideRight">
152+
<p>Slide right</p>
153+
</div>
154+
</li>
155+
156+
<li>
157+
<div class="effect" id="transfer">
158+
<p>Transfer to first element</p>
159+
</div>
160+
</li>
161+
162+
</ul>
163+
164+
</body>
165+
</html>

‎tests/visual/effects.all.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
$(document).ready(function() {
2+
3+
$("div.effect")
4+
.hover(function() {
5+
$(this).addClass("hover");
6+
}, function() {
7+
$(this).removeClass("hover");
8+
})
9+
;
10+
11+
12+
var effect = function(el, n, o) {
13+
14+
$.extend(o, {
15+
easing: "easeOutQuint"
16+
});
17+
18+
$(el).bind("click", function() {
19+
20+
$(this).addClass("current").hide(n, o, 1000, function() {
21+
var self = this;
22+
window.setTimeout(function() {
23+
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
24+
},500);
25+
});
26+
});
27+
28+
};
29+
30+
31+
effect("#blindHorizontally", "blind", { direction: "horizontal" });
32+
effect("#blindVertically", "blind", { direction: "vertical" });
33+
34+
effect("#bounce3times", "bounce", { times: 3 });
35+
36+
effect("#clipHorizontally", "clip", { direction: "horizontal" });
37+
effect("#clipVertically", "clip", { direction: "vertical" });
38+
39+
effect("#dropDown", "drop", { direction: "down" });
40+
effect("#dropUp", "drop", { direction: "up" });
41+
effect("#dropLeft", "drop", { direction: "left" });
42+
effect("#dropRight", "drop", { direction: "right" });
43+
44+
effect("#explode9", "explode", { });
45+
effect("#explode36", "explode", { pieces: 36 });
46+
47+
effect("#fold", "fold", { size: 50 });
48+
49+
effect("#highlight", "highlight", { });
50+
51+
effect("#pulsate", "pulsate", { times: 2 });
52+
53+
effect("#puff", "puff", { times: 2 });
54+
effect("#scale", "scale", { });
55+
56+
$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
57+
58+
effect("#slideDown", "slide", { direction: "down" });
59+
effect("#slideUp", "slide", { direction: "up" });
60+
effect("#slideLeft", "slide", { direction: "left" });
61+
effect("#slideRight", "slide", { direction: "right" });
62+
63+
$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
64+
65+
});

0 commit comments

Comments
 (0)