Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Common Parameters for the Effects


previous next AddThis Social Bookmark Button


Advertisements

There are following common option which can be set for all the core effects:

OptionDescription
durationDuration of the effect in seconds, given as a float. Defaults to 1.0.
fpsTarget this many frames per second. Default to 25. Can.t be higher than 100.
transitionSets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied:
  • Effect.Transitions.sinoidal (default)
  • Effect.Transitions.linear
  • Effect.Transitions.reverse
  • Effect.Transitions.wobble
  • Effect.Transitions.flicker
fromSets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0.
toSets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0.
syncSets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().
queueSets queuing options. When used with a string, can be front or end to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:front/end, scope: scope, limit:1}.
delaySets the number of seconds to wait before the effect actually starts. Defaults to 0.0.
directionSets the direction of the transition. Values can be either 'top-left', 'top-right', 'bottom-left', 'bottom-right' or 'center' (Default). Applicable only on Grow and Shrink effects.

Here is an example to apply one or more of the above mentioned parameters. All the parameters are put in a {} and they are separated by comma ,:

<html>
<head>
<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>

</head>
<body>
<p>Try by giving different parameters</p>
<div onclick="new Effect.Opacity(this,
      { 
        duration: 2.0, 
        transition: Effect.Transitions.linear, 
        from: 1.0, to: 0.5 
      });">
    Click here to see the result:
</div>
</body>
</html>

To understand it in better way you can Try it yourself.

Callback Methods:

You can apply any of the above mentioned parameter to any element at various events while the effect is running. This is done by writing a callback method in Javascript for that element.

To use a callback method you have additional four parameters as listed below:

CallbackDescription
beforeStartCalled before the main effects rendering loop is started.
beforeUpdateCalled on each iteration of the effects rendering loop, before the redraw takes places.
afterUpdateCalled on each iteration of the effects rendering loop, after the redraw takes places.
afterFinishCalled after the last redraw of the effect was made.

Within the effect object, there are several useful variables you can access and use them in your callback functions:

VariableDescription
effect.elementThe element the effect is applied to.
effect.optionsHolds the options you gave to the effect.
effect.currentFrameThe number of the last frame rendered.
effect.startOnThe times (in ms) when the effect was started.
effect.finishOnThe times (in ms) when the effect will be finished after starting an effect.
effect.effects[]On an Effect.Parallel effect, there's an effects[] array containing the individual effects the parallel effect is composed of.

Example:

Following is the example to use a callback:

<html>
<head>
<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>
   <script type="text/javascript">
   function OnFinish(obj){
     alert("Finishing - I'm element :" + obj.element.id);
   }
   function OnStart(obj){
     alert("Starting - I'm element :" + obj.element.id);
   }
   function myEffect(myObject){
      new Effect.Highlight(myObject, 
                        { startcolor:'#ffffff',
                          endcolor:'#ffffcc',
                          duration: 0.5,
                          afterFinish: OnFinish,
                          beforeStart: OnStart 
                         });
    }
    </script>
</head>
<body>
<p>Click following line to see the result:</p>
<div onclick="myEffect(this)" id="bestdiv">
    Click me to see the result!
</div>
</body>
</html>

NOTE: Here startcolor and endcolor are effect specific paramters and we will discuss these parameters when we will discuss Effect.Highlight.

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements