aboutsummaryrefslogtreecommitdiffstats
path: root/demos/real-world/effects/demo.js
blob: b52b23726ebeb0ce0c65e5ba9bd7caec5d92b491 (plain)
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
$(document).ready(function() {
	
	$("div.effect")
		.hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		})
		;
	
	
	var effect = function(el, n, o) {
		
		$.extend(o, {
			easing: "easeOutQuint"
		});
		
		$(el).bind("click", function() {
			
			$(this).addClass("current").hide(n, o, 1000, function() {
				var self = this;
				window.setTimeout(function() {
					$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
				},500);
			});
		});
		
	};
		

	effect("#blindHorizontally", "blind", { direction: "horizontal" });
	effect("#blindVertically", "blind", { direction: "vertical" });
	
	effect("#bounce3times", "bounce", { times: 3 });
	
	effect("#clipHorizontally", "clip", { direction: "horizontal" });
	effect("#clipVertically", "clip", { direction: "vertical" });
	
	effect("#dropDown", "drop", { direction: "down" });
	effect("#dropUp", "drop", { direction: "up" });
	effect("#dropLeft", "drop", { direction: "left" });
	effect("#dropRight", "drop", { direction: "right" });
	
	effect("#explode9", "explode", {  });
	effect("#explode36", "explode", { pieces: 36 });
	
	effect("#fold", "fold", { size: 50 });
	
	effect("#highlight", "highlight", {  });
	
	effect("#pulsate", "pulsate", { times: 2 });
	
	effect("#puff", "puff", { times: 2 });
	effect("#scale", "scale", {  });
	
	$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
	
	effect("#slideDown", "slide", { direction: "down" });
	effect("#slideUp", "slide", { direction: "up" });
	effect("#slideLeft", "slide", { direction: "left" });
	effect("#slideRight", "slide", { direction: "right" });
	
	$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
	
});