|
1
|
/** $Id$ */
|
|
2
|
// Title: Fadomatic
|
|
3
|
// Version: 1.2
|
|
4
|
// Homepage: http://chimpen.com/fadomatic
|
|
5
|
// Author: Philip McCarthy <fadomatic@chimpen.com>
|
|
6
|
|
|
7
|
// Fade interval in milliseconds
|
|
8
|
// Make this larger if you experience performance issues
|
|
9
|
Fadomatic.INTERVAL_MILLIS = 50;
|
|
10
|
|
|
11
|
// Creates a fader
|
|
12
|
// element - The element to fade
|
|
13
|
// speed - The speed to fade at, from 0.0 to 100.0
|
|
14
|
// initialOpacity (optional, default 100) - element's starting opacity, 0 to 100
|
|
15
|
// minOpacity (optional, default 0) - element's minimum opacity, 0 to 100
|
|
16
|
// maxOpacity (optional, default 0) - element's minimum opacity, 0 to 100
|
|
17
|
function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity) {
|
|
18
|
this._element = element;
|
|
19
|
this._intervalId = null;
|
|
20
|
this._rate = rate;
|
|
21
|
this._isFadeOut = true;
|
|
22
|
|
|
23
|
// Set initial opacity and bounds
|
|
24
|
// NB use 99 instead of 100 to avoid flicker at start of fade
|
|
25
|
this._minOpacity = 0;
|
|
26
|
this._maxOpacity = 99;
|
|
27
|
this._opacity = 99;
|
|
28
|
|
|
29
|
if (typeof minOpacity != 'undefined') {
|
|
30
|
if (minOpacity < 0) {
|
|
31
|
this._minOpacity = 0;
|
|
32
|
} else if (minOpacity > 99) {
|
|
33
|
this._minOpacity = 99;
|
|
34
|
} else {
|
|
35
|
this._minOpacity = minOpacity;
|
|
36
|
}
|
|
37
|
}
|
|
38
|
|
|
39
|
if (typeof maxOpacity != 'undefined') {
|
|
40
|
if (maxOpacity < 0) {
|
|
41
|
this._maxOpacity = 0;
|
|
42
|
} else if (maxOpacity > 99) {
|
|
43
|
this._maxOpacity = 99;
|
|
44
|
} else {
|
|
45
|
this._maxOpacity = maxOpacity;
|
|
46
|
}
|
|
47
|
|
|
48
|
if (this._maxOpacity < this._minOpacity) {
|
|
49
|
this._maxOpacity = this._minOpacity;
|
|
50
|
}
|
|
51
|
}
|
|
52
|
|
|
53
|
if (typeof initialOpacity != 'undefined') {
|
|
54
|
if (initialOpacity > this._maxOpacity) {
|
|
55
|
this._opacity = this._maxOpacity;
|
|
56
|
} else if (initialOpacity < this._minOpacity) {
|
|
57
|
this._opacity = this._minOpacity;
|
|
58
|
} else {
|
|
59
|
this._opacity = initialOpacity;
|
|
60
|
}
|
|
61
|
}
|
|
62
|
|
|
63
|
// See if we're using W3C opacity, MSIE filter, or just
|
|
64
|
// toggling visiblity
|
|
65
|
if(typeof element.style.opacity != 'undefined') {
|
|
66
|
|
|
67
|
this._updateOpacity = this._updateOpacityW3c;
|
|
68
|
|
|
69
|
} else if(typeof element.style.filter != 'undefined') {
|
|
70
|
|
|
71
|
// If there's not an alpha filter on the element already,
|
|
72
|
// add one
|
|
73
|
if (element.style.filter.indexOf("alpha") == -1) {
|
|
74
|
|
|
75
|
// Attempt to preserve existing filters
|
|
76
|
var existingFilters="";
|
|
77
|
if (element.style.filter) {
|
|
78
|
existingFilters = element.style.filter+" ";
|
|
79
|
}
|
|
80
|
element.style.filter = existingFilters+"alpha(opacity="+this._opacity+")";
|
|
81
|
}
|
|
82
|
|
|
83
|
this._updateOpacity = this._updateOpacityMSIE;
|
|
84
|
|
|
85
|
} else {
|
|
86
|
|
|
87
|
this._updateOpacity = this._updateVisibility;
|
|
88
|
}
|
|
89
|
|
|
90
|
this._updateOpacity();
|
|
91
|
}
|
|
92
|
|
|
93
|
// Initiates a fade out
|
|
94
|
Fadomatic.prototype.fadeOut = function () {
|
|
95
|
this._isFadeOut = true;
|
|
96
|
this._beginFade();
|
|
97
|
}
|
|
98
|
|
|
99
|
// Initiates a fade in
|
|
100
|
Fadomatic.prototype.fadeIn = function () {
|
|
101
|
this._isFadeOut = false;
|
|
102
|
this._beginFade();
|
|
103
|
}
|
|
104
|
|
|
105
|
// Makes the element completely opaque, stops any fade in progress
|
|
106
|
Fadomatic.prototype.show = function () {
|
|
107
|
this.haltFade();
|
|
108
|
this._opacity = this._maxOpacity;
|
|
109
|
this._updateOpacity();
|
|
110
|
}
|
|
111
|
|
|
112
|
// Makes the element completely transparent, stops any fade in progress
|
|
113
|
Fadomatic.prototype.hide = function () {
|
|
114
|
this.haltFade();
|
|
115
|
this._opacity = 0;
|
|
116
|
this._updateOpacity();
|
|
117
|
}
|
|
118
|
|
|
119
|
// Halts any fade in progress
|
|
120
|
Fadomatic.prototype.haltFade = function () {
|
|
121
|
|
|
122
|
clearInterval(this._intervalId);
|
|
123
|
}
|
|
124
|
|
|
125
|
// Resumes a fade where it was halted
|
|
126
|
Fadomatic.prototype.resumeFade = function () {
|
|
127
|
|
|
128
|
this._beginFade();
|
|
129
|
}
|
|
130
|
|
|
131
|
// Pseudo-private members
|
|
132
|
|
|
133
|
Fadomatic.prototype._beginFade = function () {
|
|
134
|
|
|
135
|
this.haltFade();
|
|
136
|
var objref = this;
|
|
137
|
this._intervalId = setInterval(function() { objref._tickFade(); },Fadomatic.INTERVAL_MILLIS);
|
|
138
|
}
|
|
139
|
|
|
140
|
Fadomatic.prototype._tickFade = function () {
|
|
141
|
|
|
142
|
if (this._isFadeOut) {
|
|
143
|
this._opacity -= this._rate;
|
|
144
|
if (this._opacity < this._minOpacity) {
|
|
145
|
this._opacity = this._minOpacity;
|
|
146
|
this.haltFade();
|
|
147
|
}
|
|
148
|
} else {
|
|
149
|
this._opacity += this._rate;
|
|
150
|
if (this._opacity > this._maxOpacity ) {
|
|
151
|
this._opacity = this._maxOpacity;
|
|
152
|
this.haltFade();
|
|
153
|
}
|
|
154
|
}
|
|
155
|
|
|
156
|
this._updateOpacity();
|
|
157
|
}
|
|
158
|
|
|
159
|
Fadomatic.prototype._updateVisibility = function () {
|
|
160
|
|
|
161
|
if (this._opacity > 0) {
|
|
162
|
this._element.style.visibility = 'visible';
|
|
163
|
} else {
|
|
164
|
this._element.style.visibility = 'hidden';
|
|
165
|
}
|
|
166
|
}
|
|
167
|
|
|
168
|
Fadomatic.prototype._updateOpacityW3c = function () {
|
|
169
|
|
|
170
|
this._element.style.opacity = this._opacity/100;
|
|
171
|
this._updateVisibility();
|
|
172
|
}
|
|
173
|
|
|
174
|
Fadomatic.prototype._updateOpacityMSIE = function () {
|
|
175
|
|
|
176
|
this._element.filters.alpha.opacity = this._opacity;
|
|
177
|
this._updateVisibility();
|
|
178
|
}
|
|
179
|
|
|
180
|
Fadomatic.prototype._updateOpacity = null;
|