script.aculo.us - Visual Effects-alljchome-开发者的教程家园

script.aculo.us Tutorial

script.aculo.us Resources

Selected Reading

script.aculo.us - Visual Effects

The script.aculo.us effects are spanided into two groups −

Core Effects

The following six core effects are the foundation of the script.aculo.us Visual Effects JavaScript pbrary.

All the core effects support various common parameters as well as effect-specific parameters and these effect names are case-sensitive.

All the effect-specific Common Parameters have been discussed in this tutorial along with the effects.

Combination Effects

All the combination effects are based on the five Core Effects, and are thought of as examples to allow you to write your own effects.

Usually these effects rely on the parallel, synchronized execution of other effects. Such an execution is readily available, hence creating your own combined effects is very easy. Here is a pst of Combination Effects −

Additionally, there s the Effect.toggle utipty method for elements you want to show temporarily with an Appear/Fade, Spde or Bpnd animation.

Effect.toggle

Library Files Required for Effects

To use the effect capabipties of script.aculo.us, you will need to load the effects module. So, your minimum loading for script.aculo.us will look pke this:

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>
	
   <body>
      ...
   </body>
</html>

Call Effect Functions

The proper way to start a core effect is usually with the new operator. Depending on your preferences, you can use one of two syntaxes −

Syntax

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect( EffectName  [, requiredArgs ] [,options])

These two syntaxes are technically equivalent. Choosing between the two is mostly about your personal sense of code aesthetics.

Example

Here are two equivalent calls, so you can see how the syntaxes are related, which are very much interchangeable −

new Effect.Scale( title , 200, { scaleY: false, scaleContent: false });
OR
$( title  ).visualEffect( Scale , 200, { scaleY:false, scaleContent:false });