-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample.html
executable file
·116 lines (94 loc) · 5.22 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>decodeURI » jQuery FxQueues plugin 2.0.3</title>
<style type="text/css" media="screen">
div.animate { width: 40px; height: 40px; background: black; float: left; margin: 10px; }
* { outline: 0; }
</style>
<body>
<div class="animate" id="1"></div>
<div class="animate" id="2"></div>
<div class="animate" id="3"></div>
<div class="animate" id="4"></div>
<div class="animate" id="5"></div>
<div class="animate" id="6"></div>
<div class="animate" id="7"></div>
<div class="animate" id="8"></div>
<div class="animate" id="9"></div>
<div class="animate" id="10"></div>
<div style="position: absolute; right: 50px; bottom: 20px;">
<input type="image" id="play" src="example_files/play.png" style="display: none;" />
<input type="image" id="pause" src="example_files/pause.png" />
<input type="image" id="stop" src="example_files/stop.png" />
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fxqueues-2.0.3.js"></script>
<script type="text/javascript">
function animation() {
$("div.animate").fadeOut({duration: 1000, queue: "global"});
$("div.animate").fadeIn({duration: 125, queue: "global"});
$("div.animate").fadeOut({duration: 125, queue: "global"});
$("div.animate").fadeIn({duration: 125, queue: "global"});
$("div.animate").each(function(i, e) {
$(e).animate({height: "80px"}, {duration: 200, queue: "global" });
});
$("div.animate").each(function() {
$(this).animate({marginLeft: "0px", marginRight: "0px"}, {duration: 75, queue: "global"});
});
$("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#4").animate({marginTop: "100px"}, {duration: 500, queue: "global", scope: "goDown"});
$("#5").animate({marginTop: "100px"}, {duration: 500, queue: "global", scope: "goDown"});
$("#6").animate({marginTop: "100px"}, {duration: 500, queue: "global", scope: "goDown"});
$("#7").animate({marginTop: "100px"}, {duration: 500, queue: "global", scope: "goDown"});
$("#8").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#9").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#10").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
$("#1").animate({marginLeft: "200px"}, {duration: 500, queue: "global"});
$("div.animate:odd").animate({marginTop: "50px"}, {duration: 250, queue: "global"});
$("div.animate:even").animate({marginTop: "200px"}, {duration: 250, queue: "global"});
$("#1").animate({opacity: 0.1}, {duration: 250, queue: "global", scope: "01"});
$("#3").animate({opacity: 0.2}, {duration: 200, queue: "global", scope: "01"});
$("#5").animate({opacity: 0.3}, {duration: 150, queue: "global", scope: "01"});
$("#7").animate({opacity: 0.4}, {duration: 100, queue: "global", scope: "01"});
$("#9").animate({opacity: 0.5}, {duration: 50, queue: "global", scope: "01"});
$("#10").animate({opacity: 0.1}, {duration: 250, queue: "global", scope: "02"});
$("#8").animate({opacity: 0.2}, {duration: 200, queue: "global", scope: "02"});
$("#6").animate({opacity: 0.3}, {duration: 150, queue: "global", scope: "02"});
$("#4").animate({opacity: 0.4}, {duration: 100, queue: "global", scope: "02"});
$("#2").animate({opacity: 0.5}, {duration: 50, queue: "global", scope: "02"});
$("div.animate").animate({opacity: 1}, {duration: 200, queue: "global", preDelay: 1500});
$("div.animate").animate({width: "40px", height: "40px"}, {duration: 250, queue: "global"});
$("div.animate").animate({width: "40px", height: "40px"}, { preDelay: 250, duration: 200, queue: "global"});
$("div.animate").animate({marginTop: "10px"}, { preDelay: 50, duration: 200, queue: "global"});
$("div.animate").animate({marginLeft: "10px"}, { preDelay: 50, duration: 200, queue: "global", complete: function () {
$("div.animate").css({margin: "10px", width: "40px", height: "40px"});
$("#pause").hide();
$("#play").show();
}});
}
/* Attach play|pause|stop events */
$("#stop").click(function(event) {
$.fxqueue("global").stop();
$("div.animate").css({margin: "10px", width: "40px", height: "40px"});
$("#pause").hide();
$("#play").show();
});
$("#play").click(function(event) {
if ( $.fxqueue("global").length > 0 )
$.fxqueue("global").start();
else
animation();
$("#pause, #play").toggle();
});
$("#pause").click(function(event) {
$.fxqueue("global").pause();
$("#pause, #play").toggle();
});
animation();
</script>
</html>