Effect.Morphis smart enough to figure out how to get from A to B... Figure 10-6.Effect.Morph can animate any number of CSS properties at once.Notice, however, that our text-transformprop
Trang 1Our JavaScript needn’t be changed:
new Effect.Morph('box', {
style: "left: 50px; top: 50px;",
duration: 1.0
});
Now, instead of moving down and to the right, the box moves up and to the left, as
shown in Figure 10-5 Effect.Morphis smart enough to figure out how to get from A to B
started.
Trang 2Morphing in Parallel
Perhaps the best thing about Effect.Morphis its ability to animate several different things
at once Let’s see how it handles some curveballs:
/* CSS: */
#box {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: #999;
border: 2px solid #000;
font-family: "Helvetica Neue";
text-transform: uppercase;
text-align: center;
line-height: 50px;
font-size: 10px;
}
/* JS: */
$('box').morph({
width: "100px",
height: "100px",
top: "125px",
left: "150px",
backgroundColor: "#000",
borderColor: "#bbb",
color: "#fff",
lineHeight: "100px",
fontSize: "18px",
textTransform: "lowercase",
}, { duration: 2.5 });
Still with me? We’re animating a lot of properties here: the box’s size, positioning, background color, and border color; plus the text’s color, size, and line height (We change line height in order to keep the text vertically aligned in the center of the box.)
We set a longer duration for this effect to make sure all these changes are happening
in parallel Effect.Morphhandles it with aplomb (see Figure 10-6)
C H A P T E R 1 0 ■ I N T R O D U C T I O N TO S C R I P T A C U L O U S E F F E C T S
224
Trang 3Figure 10-6.Effect.Morph can animate any number of CSS properties at once.
Notice, however, that our text-transformproperty was ignored There’s no way to
animate the switch from uppercase to lowercase, so Effect.Morphcan’t do anything
with it
Trang 4Before we move on to other effects, let’s try one more thing Take all the styles in the preceding morphcall and place them into their own CSS class:
#box.big-box {
width: 100px;
height: 100px;
left: 150px;
top: 125px;
background-color: #000;
border-color: #bbb;
color: #fff;
line-height: 100px;
font-size: 18px;
text-transform: lowercase;
}
After all, this is where style information belongs Stuffing it all into a JavaScript string made things awkward Moving it into CSS makes our code much cleaner (see Figure 10-7):
$('box').morph('big-box', { duration: 2.5 });
There’s some magic going on in Figure 10-7 Effect.Morphcan tell we’re giving it a class name instead of a string of CSS rules, so it reads the style information to figure out what needs to be animated It performs the animation just as before, but at the very end
it adds the class name onto the element.
So you’ve seen that Effect.Morphis a time-lapse version of both Element#setStyle and Element#addClassName In other words, instead of using these two methods to change element styles instantly, you can use Effect.Morphto change them gradually over a span
of time
You’ve also seen the advantage of giving Effect.Morpha class name: our untweenable property, text-transform, is no longer ignored It takes effect at the end of the animation— when the big-boxclass name is added to our box
C H A P T E R 1 0 ■ I N T R O D U C T I O N TO S C R I P T A C U L O U S E F F E C T S
226
Trang 5Figure 10-7.Effect.Morph can handle CSS class names as well.
Trang 6Other Core Effects
script.aculo.us sports several core effects for use when Effect.Morphcan’t do the job
They’re called core effects because they’re the building blocks of the effects library—each
one modifies elements in one specific way They can be combined to form more elabo-rate effects, some of which we’ll look at later on
Effect.Move
Effect.Movehandles positioning—moving an element any number of pixels (see
Figure 10-8):
new Effect.Move('box', { x: 50, y: 50 });
Effect.Movetakes a modeparameter with two possible values—relativeand
absolute—which mirror the two CSS positioning modes of the same names The default, relative, indicates motion relative to the element’s current position The xand y parame-ters, then, indicate movement in the horizontal and the vertical directions In absolute mode, the xand yparameters indicate where to place the element relative to its offset parent
Effect.Movehandles nearly all block-level elements with grace, even those that have
a CSS positionof static It will “absolutize” or “relativize” the element before changing its position
C H A P T E R 1 0 ■ I N T R O D U C T I O N TO S C R I P T A C U L O U S E F F E C T S
228