Practical prototype and scipt.aculo.us part 41 docx

It animates the scrolling of the browser viewport to bring the specified element into view.. Figure 10-14.Effect.ScrollTo animates the viewport’s scroll offset.Introduction to Combinatio

Effect.ScrollTois far more focused than the other core effects It animates the scrolling

of the browser viewport to bring the specified element into view In other words, it’s a

To illustrate this effect, let’s change the CSS so that our box is “below the fold” on

page load My viewport isn’t very tall, so bumping it down 500 pixels will do it Let’s also

change the height of the page so that we’ll have some space below the box:

/* CSS: */

#box {

position: absolute;

width: 50px;

height: 50px;

top: 500px;

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;

}

body {

height: 1500px;

}

/* JS: */new Effect.ScrollTo('box');

This effect, shown in Figure 10-14, simulates the “smooth scrolling” behavior that’s

now used in many applications It helps the reader jump to a different part of the page

without losing her original position

Figure 10-14.Effect.ScrollTo animates the viewport’s scroll offset.

Introduction to Combination Effects

We’ve only scratched the surface of script.aculo.us effects As I mentioned earlier, the true

power lies in writing combination effects—groups of core effects that run in parallel to

create more complex animations You’ll get to write your own effects later on, but first let’s look at some of the combination effects given to you out of the box

The first three examples of combination effects illustrate different ways to animate

Element#show There are many different ways to get from visible to invisible

Effect.Fade and Effect.Appear

Effect.Fadewill decrease the element’s opacity until it’s invisible, and then hide it; and

Effect.Appearwill show the element fully transparent, and then increase opacity

gradu-ally until it fades into view (see Figure 10-15)

new Effect.Fade("box");

Figure 10-15.Effect.Fade decreases an element’s opacity until it’s invisible.

Naturally, Effect.Fadecommunicates something “fading away” (like an old soldier),

so it’s best used on items that will disappear and not be used again Likewise,

Effect.Appearsuggests the creation of something new, so it’s best used on items that haven’t been shown on the page before

Effect.BlindUp and Effect.BlindDown

anima-tion in reverse

new Effect.BlindUp('box');

Figure 10-16.Effect.BlindUp hides an element by covering up a progressively larger part of the element, starting from the bottom.

Effect.BlindUpsuggests that the element has simply been covered up; thus, it feels

but can also be shown again

Effect.SlideUp and Effect.SlideDown

Effect.SlideUpwill hide the element vertically, line by line, starting with the top of the

These effects carry one caveat: to work properly, they require the element in question

<! HTML: >

<div id="box"><div>Box</div></div>

/* JS: */

new Effect.SlideUp('box');

Figure 10-17.Effect.SlideUp hides an element by “pushing” it from the bottom and covering

it from the top.

Effect.SlideUpsuggests that the element is disappearing into the element right

above it So this pair of effects is useful for collapsible panels, accordion menus, and even things like expandable trees

Effects Are Asynchronous

execu-tion Remember how effects work at their core: a function is called, over and over again, via setTimeout Each call advances the animation by one frame But any other code can run in the “gaps” between these “scheduled” animation frames

To illustrate, we can start an effect, and then invoke the Firebug debugger with the

code

Effect.Fade('box'); debugger;

Figure 10-18 shows the state of the page when the debugger starts

Figure 10-18.The debugger has paused execution before our effect has finished.