1 |
$(function() { |
2 |
|
3 |
var duration = 1000, |
4 |
wait = 500; |
5 |
|
6 |
function effect( elem, name, options ) { |
7 |
$.extend( options, { |
8 |
easing: "easeOutQuint" |
9 |
}); |
10 |
|
11 |
$( elem ).click(function() { |
12 |
$( this ) |
13 |
.addClass( "current" ) |
14 |
// delaying the initial animation makes sure that the queue stays in tact |
15 |
.delay( 10 ) |
16 |
.hide( name, options, duration ) |
17 |
.delay( wait ) |
18 |
.show( name, options, duration, function() { |
19 |
$( this ).removeClass( "current" ); |
20 |
}); |
21 |
}); |
22 |
} |
23 |
|
24 |
$( "#hide" ).click(function() { |
25 |
$( this ) |
26 |
.addClass( "current" ) |
27 |
.hide( duration ) |
28 |
.delay( wait ) |
29 |
.show( duration, function() { |
30 |
$( this ).removeClass( "current" ); |
31 |
}); |
32 |
}); |
33 |
|
34 |
effect( "#blindLeft", "blind", { direction: "left" } ); |
35 |
effect( "#blindUp", "blind", { direction: "up" } ); |
36 |
effect( "#blindRight", "blind", { direction: "right" } ); |
37 |
effect( "#blindDown", "blind", { direction: "down" } ); |
38 |
|
39 |
effect( "#bounce3times", "bounce", { times: 3 } ); |
40 |
|
41 |
effect( "#clipHorizontally", "clip", { direction: "horizontal" } ); |
42 |
effect( "#clipVertically", "clip", { direction: "vertical" } ); |
43 |
|
44 |
effect( "#dropDown", "drop", { direction: "down" } ); |
45 |
effect( "#dropUp", "drop", { direction: "up" } ); |
46 |
effect( "#dropLeft", "drop", { direction: "left" } ); |
47 |
effect( "#dropRight", "drop", { direction: "right" } ); |
48 |
|
49 |
effect( "#explode9", "explode", {} ); |
50 |
effect( "#explode36", "explode", { pieces: 36 } ); |
51 |
|
52 |
effect( "#fade", "fade", {} ); |
53 |
|
54 |
effect( "#fold", "fold", { size: 50 } ); |
55 |
|
56 |
effect( "#highlight", "highlight", {} ); |
57 |
|
58 |
effect( "#pulsate", "pulsate", { times: 2 } ); |
59 |
|
60 |
effect( "#puff", "puff", { times: 2 } ); |
61 |
effect( "#scale", "scale", {} ); |
62 |
effect( "#size", "size", {} ); |
63 |
$( "#sizeToggle" ).click(function() { |
64 |
var options = { to: { width: 300, height: 300 } }; |
65 |
$( this ) |
66 |
.addClass( "current" ) |
67 |
.toggle( "size", options, duration ) |
68 |
.delay( wait ) |
69 |
.toggle( "size", options, duration, function() { |
70 |
$( this ).removeClass( "current" ); |
71 |
}); |
72 |
}); |
73 |
|
74 |
$( "#shake" ).click(function() { |
75 |
$( this ) |
76 |
.addClass( "current" ) |
77 |
.effect( "shake", {}, 100, function() { |
78 |
$( this ).removeClass( "current" ); |
79 |
}); |
80 |
}); |
81 |
|
82 |
effect( "#slideDown", "slide", { direction: "down" } ); |
83 |
effect( "#slideUp", "slide", { direction: "up" } ); |
84 |
effect( "#slideLeft", "slide", { direction: "left" } ); |
85 |
effect( "#slideRight", "slide", { direction: "right" } ); |
86 |
|
87 |
$( "#transfer" ).click(function() { |
88 |
$( this ) |
89 |
.addClass( "current" ) |
90 |
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() { |
91 |
$( this ).removeClass( "current" ); |
92 |
}); |
93 |
}); |
94 |
|
95 |
$( "#addClass" ).click(function() { |
96 |
$( this ).addClass( "current", duration, function() { |
97 |
$( this ).removeClass( "current" ); |
98 |
}); |
99 |
}); |
100 |
$( "#removeClass" ).click(function() { |
101 |
$( this ).addClass( "current" ).removeClass( "current", duration ); |
102 |
}); |
103 |
$( "#toggleClass" ).click(function() { |
104 |
$( this ).toggleClass( "current", duration ); |
105 |
}); |
106 |
|
107 |
}); |