fat/test/presets.html at master · nextapps-de/fat · GitHub

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
<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Test: Presets (Effects)</title>
	<style>
		.square{
			position: relative;
			display: inline-block;
			left: 0 !important;
			width: auto;
			height: auto;
			vertical-align: text-bottom;
			color: #fff;
			background-color: #000;
			padding: 20px;
		}
	</style>
</head>
<body>
<div id="square_1" class="square">1</div><br>
<div id="square_2" class="square">2</div><br>
<div id="square_3" class="square">3</div><br>
<div id="square_4" class="square">4</div><br>
<div id="square_5" class="square">5</div><br>
<div id="square_6" class="square">6</div><br>
<div id="square_7" class="square">7</div><br>
<div id="square_8" class="square">8</div><br>
<div id="square_9" class="square">9</div><br>
<div id="square_10" class="square">10</div><br>
<div id="square_11" class="square">11</div><br>
<div id="square_12" class="square">12</div><br>
<div id="square_13" class="square">13</div><br>
<script type="text/javascript" src="../fat.js"></script>
<script>

	Fat.animate("#square_1", "fadeOut", function(){
		Fat.animate(this, "fadeIn");
	});

	Fat.animate("#square_2", ["fadeOut", "fadeIn"]);
	Fat.animate("#square_3", ["fadeToggle", "fadeToggle"]);

	Fat.animate("#square_4", ["slideOutBottom", "slideInBottom"]);
	Fat.animate("#square_5", ["slideToggleBottom", "slideToggleBottom"]);

	Fat.animate("#square_6", ["zoomOut", "zoomIn"]);
	Fat.animate("#square_7", ["zoomToggle", "zoomToggle"]);

	Fat.animate("#square_8", ["rollOutRight", "rollInRight"]);
	Fat.animate("#square_9", ["rollToggleRight", "rollToggleRight"]);

	Fat.animate("#square_10", ["blurOut", "blurIn"]);
	Fat.animate("#square_11", ["blurToggle", "blurToggle"]);

	Fat.animate("#square_12", ["fadeOut slideOutBottom zoomOut rollOutRight", "fadeIn slideInBottom zoomIn rollInRight"]);
	Fat.animate("#square_13", ["fadeToggle slideToggleBottom zoomToggle rollToggleRight", "fadeToggle slideToggleBottom zoomToggle rollToggleRight"]);

</script>
</body>
</html>