The fifth element has its opacity
changed from 20 percent to 50 percent.
This functionality is handy if you have a number of dependent animations, such as
having one area expand while a number of other areas collapse at the same time.
Script.aculo.us
Script.aculo.us (http://script.aculo.us) is an animation and widget library built on top of
Prototype. The Prototype/Script.aculo.us combo is quite popular and is the default in a number
of server-side frameworks.
Effects can be quickly and easily applied by using a couple lines of code:
new Effect.Opacity('myElement',
{ duration: 2.0,
transition: Effect.Transitions.linear,
from: 1.0, to: 0.5 });
The class takes the element ID (or the element itself) as the first parameter and an
options object literal as the second parameter. This example changes the opacity of an element
from 100 percent to 50 percent over 2 seconds. The transition property enables
mathematical transitions to be applied to create a more natural feel to the animations. They
can start off slow and then speed up. They can start off fast and then slow down. They can
even bounce back and forth before settling into place.
Script.aculo.us really shines when you use its controls, making it super simple to add
them in any project. Here??™s a sortable list example:
Sortable.create("firstlist",
{dropOnEmpty:true,
containment:["firstlist","secondlist"],
constraint:false});
CHAPTER 4 n LIBRARIES 93
The Sortable control expects to use a list by default and makes each element draggable,
which enables each element to be dragged elsewhere in the tree (enabling the user to re-sort
the items).
Pages:
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157