Copyright © tutorialspoint.com

# script.aculo.us Effects

The script.aculo.us effects are divided into two groups:

- Core Effects: The following six core effects are the foundation of the script.aculo.us Visual Effects Java Script library.

  1. Effect.Opacity

  2. Effect.Scale

  3. Effect.Morph

  4. Effect.Move

  5. Effect.Highlight

  6. Effect.Parallel

  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 parameters have been discussed along with the effects and you can check all Common Parameters here.

- 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. Because such an execution is readily available, creating your own combined effects is very easy. Here is a list of Combination Effects:

  1. Effect.Appear

  2. Effect.Fade

  3. Effect.Puff

  4. Effect.DropOut

  5. Effect.Shake

  6. Effect.SwitchOff

  7. Effect.BlindDown

  8. Effect.BlindUp

  9. Effect.SlideDown

  10. Effect.SlideUp

  11. Effect.Pulsate

  12. Effect.Squish

  13. Effect.Fold

  14. Effect.Grow

  15. Effect.Shrink

  Additionally, there's the Effect.toggle utility method for elements you want to show temporarily with an Appear/Fade, Slide or Blind animation.

  16. Effect.toggle

# Library files required for Effects:

To use the effects capabilities of script.aculo.us, you will need to load the effects module. So, your minimum loading for script.aculo.us will look like 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>

# Syntax to 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:

    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.

# Simple 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 });

Copyright © tutorialspoint.com