Development »Javascript» Internet

Scriptaculous Effect.Tween: how it works

Thursday, March 20, 2008

Of all the libraries "web 2.0" available, scriptaculous is certainly the most poorly documented! On the official website, often slow, the documentation is incomplete, poorly made and difficult to use. With the latest releases, then, some new features are completely missing, just as the new core effect Tween (Effect.Tween). The latter, similar to the Tween in Flash, allows you to manipulate transitions. SYNOPSIS its base is the following:

PLAIN TEXT
JavaScript:
  1. object , from , to ) ; Effect. Tween (object, from, to);

This new effect can thus execute a tween (transition) between two values, call methods or set properties of an object (including the elements of the HTML DOM). It also supports callback functions that will have the context of the object on which you run the transition.

Let's see some examples:

a) Performs a property Tween mp object mo

PLAIN TEXT
JavaScript:
  1. { mp : 0 } var mo = (MP: 0)
  2. / /
  3. ( mo , 30 , 80 , 'mp' ) ; New Effect. Tween (mo, 30, 80, 'mp');

b) Perform a Tween on the element 'foo' DOM HTML

PLAIN TEXT
HTML:
  1. "foo" >< / div> <div id = "foo"> </ div>

PLAIN TEXT
JavaScript:
  1. 'foo' ', 0, 100, ' innerHTML '); EffectTween new ( 'foo' ', 0, 100,' innerHTML ');

c) Set the standard parameters supported by scriptaculous:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; New Effect. Tween ( 'foo', 10, 100, (duration: 10), 'innerHTML');

d) Use of callback functions:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { New Effect. Tween ( 'foo', 10, 100, (duration: 10.0), function (p) (
  2. = 'Countdown: ' + p this. innerHTML = 'Countdown:' + p
  3. )
  4. )

e) type of transition:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; New Effect. Tween ( 'foo', 10, 100, (duration: 10, transition: Effect. Transitions. sinoidal), 'innerHTML');

f) The standard of the events:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; New Effect. Tween ( 'foo', 10, 100, (duration: 2, afterFinish: function () (alert ( "Game Over");)), function (p) (this. innerHTML = 'Countdown:' + p ));

To test these examples you can use the following complete code:

PLAIN TEXT
HTML:
  1. DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. > <html "http://www.w3.org/1999/xhtml" xmlns =>
  4. "Content-Type" content = "text/html; charset=utf-8" / > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
  5. <title> Untitled Document </ title>
  6. "text/javascript" src = "js/prototype.js" >< / script> <script "text/javascript" type = src = "js/prototype.js"> </ script>
  7. "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script> <script "text/javascript" type = src = "js/scriptaculous.js?load=effects"> </ script>
  8. "text/javascript" > <script type = "text/javascript">
  9. / /
  10. Event.observe (window, 'load', main);
  11. / /
  12. function main () (
  13. Effect.Tween new ( 'foo', 10, 100, (duration: 2, afterFinish: function () (alert ( "Game Over");)), function (p) = (this.innerHTML 'Countdown:' + p ));
  14. )
  19. "foo" >< / div> <div id = "foo"> </ div>

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: JavaScript

There are no comments for this post

Leave a comment

TAG XHTML PERMISSIONS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL