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
|
var duration = 1000,
wait = 500;
function effect( elem, name, options ) {
$.extend( options, {
easing: "easeOutQuint"
} );
$( elem ).on( "click", function() {
$( this )
.addClass( "current" )
// delaying the initial animation makes sure that the queue stays in tact
.delay( 10 )
.hide( name, options, duration )
.delay( wait )
.show( name, options, duration, function() {
$( this ).removeClass( "current" );
} );
} );
}
$( "#hide" ).on( "click", function() {
$( this )
.addClass( "current" )
.hide( duration )
.delay( wait )
.show( duration, function() {
$( this ).removeClass( "current" );
} );
} );
effect( "#blindLeft", "blind", { direction: "left" } );
effect( "#blindUp", "blind", { direction: "up" } );
effect( "#blindRight", "blind", { direction: "right" } );
effect( "#blindDown", "blind", { direction: "down" } );
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( "#fade", "fade", {} );
effect( "#fold", "fold", { size: 50 } );
effect( "#highlight", "highlight", {} );
effect( "#pulsate", "pulsate", { times: 2 } );
effect( "#puff", "puff", {} );
effect( "#scale", "scale", {} );
effect( "#size", "size", {} );
$( "#sizeToggle" ).on( "click", function() {
var options = { to: { width: 300, height: 300 } };
$( this )
.addClass( "current" )
.toggle( "size", options, duration )
.delay( wait )
.toggle( "size", options, duration, function() {
$( this ).removeClass( "current" );
} );
} );
$( "#shake" ).on( "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" ).on( "click", function() {
$( this )
.addClass( "current" )
.effect( "transfer", { to: $( "div" ).eq( 0 ) }, 1000, function() {
$( this ).removeClass( "current" );
} );
} );
$( "#addClass" ).on( "click", function() {
$( this ).addClass( "current", duration, function() {
$( this ).removeClass( "current" );
} );
} );
$( "#removeClass" ).on( "click", function() {
$( this ).addClass( "current" ).removeClass( "current", duration );
} );
$( "#toggleClass" ).on( "click", function() {
$( this ).toggleClass( "current", duration );
} );
|
