By using a minimized version of the code, you can reduce the file
size and thereby reduce the amount of bandwidth the file needs to use.Many of the other
libraries, such as jQuery and YUI, also offer up minimized versions.
Figure 4-4.Mootools download configurator
nNote During the development phase of a project, it??™s best to use the uncompressed versions of the
libraries. Debugging is much easier because code becomes easier to trace when in an unminimized form.
In its current 1.05 version, Firebug might report incorrect function names when using a minimized form.
Just remember to switch to the compressed versions when you??™re ready to launch.
CHAPTER 4 n LIBRARIES 92
One of my favorite features of Mootools is its capability to not only set animation on an
element but to set it on multiple elements at one time:
var myElementsEffects = new Fx.Elements($$('a'));
myElementsEffects.start({
'0': { //let's change the first element's opacity and width
'opacity': [0,1],
'width': [100,200]
},
'4': { //and the fifth one's opacity
'opacity': [0.2, 0.5]
}
});
Using the Fx.Elements class, it uses the $$() function just like Prototype; in this case, it
passes in a list of links. The start() method starts the animation and takes an options object
as its only parameter. The object literal uses keys to define which elements should be animated.
The first and fifth elements (you??™re starting from 0) will be animated with the first
element having its opacity changed from 0 percent to 100 percent (going from invisible to
completely visible) and its width going from 100px to 200px.
Pages:
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156