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