Our 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.Morph is smart enough to figure out how to get from A to B. Figure 10-5. The element starts somewhere else, but ends up where the previous animation started. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 223 Morphing in Parallel Perhaps the best thing about Effect.Morph is 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.Morph handles it with aplomb (see Figure 10-6). CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS224 Figure 10-6. Effect.Morph can animate any number of CSS properties at once. Notice, however, that our text-transform property was ignored. There’s no way to animate the switch from uppercase to lowercase, so Effect.Morph can’t do anything with it. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 225 Before we move on to other effects, let’s try one more thing. Take all the styles in the preceding morph call 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.Morph can tell we’re giving it a class name instead of a str ing 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.Morph is 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.Morph to change them gradually over a span of time. You’ve also seen the advantage of giving Effect.Morph a class name: our untweenable property, text-transform, is no longer ignored. It takes effect at the end of the animation— when the big-box class name is added to our box. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS226 Figure 10-7. Effect.Morph can handle CSS class names as well. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS 227 Other Core Effects script.aculo.us sports several core effects for use when Effect.Morph can’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.Move handles positioning—moving an element any number of pixels (see Figure 10-8): new Effect.Move('box', { x: 50, y: 50 }); Effect.Move takes a mode parameter with two possible values—relative and 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 x and y parame- ters, then, indicate movement in the horizontal and the vertical directions. In absolute mode, the x and y parameters indicate where to place the element relative to its offset parent. Effect.Move handles nearly all block-level elements with grace, even those that have a CSS position of static. It will “absolutize” or “relativize” the element before changing its position. CHAPTER 10 ■ INTRODUCTION TO SCRIPT.ACULO.US EFFECTS228 . TO SCRIPT .ACULO. US EFFECTS226 Figure 10-7. Effect.Morph can handle CSS class names as well. CHAPTER 10 ■ INTRODUCTION TO SCRIPT .ACULO. US EFFECTS 227 Other Core Effects script .aculo. us sports. 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. these changes are happening in parallel. Effect.Morph handles it with aplomb (see Figure 10-6). CHAPTER 10 ■ INTRODUCTION TO SCRIPT .ACULO. US EFFECTS224 Figure 10-6. Effect.Morph can animate any