Practical prototype and scipt.aculo.us part 40 pdf

Figure 10-8.Effect.Move animates an element’s position.... Effect.Scalehandles, well, scaling—changing the size of an element and, optionally, the size of its contents by a given percent

Figure 10-8.Effect.Move animates an element’s position.

Effect.Scalehandles, well, scaling—changing the size of an element (and, optionally, the size of its contents) by a given percentage (see Figure 10-9):

new Effect.Scale('box', 150);

Figure 10-9.Effect.Scale animates an element’s height and width.

The second argument is an integer that represents the scaling percentage In this

example, the element grows to 150 percent of its original size (Note that the contents

of the box have been scaled as well—the text is also 150 percent bigger.) Effect.Scale

also supports several optional parameters for more granular control of the effect (see

Figure 10-10):

new Effect.Scale('box', 100,

{ scaleContent: false, scaleFrom: 50.0, scaleFromCenter: true });

Figure 10-10.Effect.Scale is broadly configurable.

First, we have scaleContent, which, when set to false, will scale only the box and not the text inside The second parameter, scaleFrom, can be used to set a different initial per-centage Here, the box will jump to 50 percent of its original size, and then animate back

to 100 percent of its original size Finally, by setting scaleFromCenterto true, we can ensure that the center of the box, not the top-left corner, remains fixed throughout the effect Figure 10-11 shows the result

new Effect.Scale('box', 150, { scaleX: false, scaleY: true });

Figure 10-11.Effect.Scale can be told to animate only height or width.

We can also restrict the scaling to one dimension: scaleXand scaleYboth default to

true, but setting one to falsewill prevent it from growing along that axis (Setting both to

falsewould be plainly silly.)

Effect.Highlight

Effect.Highlightsimplifies a common use case for effects: the pulse-like animation

of an element’s background color, otherwise known as the “yellow fade technique.”

Popularized by 37signals’s web apps, the effect is an elegant, subtle way to call

atten-tion to a region of the page that has changed—for instance, as the result of an Ajax

call Figure 10-12 shows the technique

new Effect.Highlight('box');

Figure 10-12.Effect.Highlight “pulses” a background color on an element.

As you might expect, the default highlight color is a light shade of yellow, but the parameters startcolorand endcolorlet us set the colors for the first and last frames of the effect, respectively; and restorecolorlets us set the color that the element will become after the effect is complete (see Figure 10-13):

new Effect.Highlight('box',

{ startcolor: "#ffffff", endcolor: "#000000", restorecolor: "#999999" });

Figure 10-13.Effect.Highlight with custom colors