Permalink
Browse files

Merge remote branch 'kipz/master'

  • Loading branch information...
2 parents 9d70d60 + 50e42f8 commit 5ae2f3f6cfde7406e52dd0f77d266b5c154b0ff4 @madrobby madrobby committed Sep 9, 2010
Showing with 42 additions and 2 deletions.
  1. +40 −0 src/effects/parallel.js
  2. +2 −2 templates/html/index.erb
@@ -2,6 +2,46 @@
* class S2.FX.Parallel < S2.FX.Base
*
* Effect to execute several other effects in parallel.
+ *
+ * Instead of reitering what already exists for [[S2.FX]] and [[S2.FX.Base]], lets
+ * just get down to business with a quick example!
+ *
+ * <h4>Morphing 2 elements example</h4>
+ *
+ * new S2.FX.Parallel([ // the parallel effect itself
+ * new S2.FX.Morph('element1_id', { // morph element1_id
+ * after: function() // after execution function
+ * {
+ * $('element2_id').update('morphing!'); // write this after executing
+ * },
+ * delay: 0.1, // just a little starting delay
+ * duration: 0.9, // duration should equal 1 sec w/ delay
+ * position: 'parallel', // the queue position is 'parallel'
+ * style: 'height: 150px; width: 350px;', // resize our first element from 0x0
+ * transition: 'spring' // a transition for element morphing
+ * }),
+ * new S2.FX.Morph('element2_id', { // morph element2_id
+ * after: function() // after execution function
+ * {
+ * $('element2_id').update('finished!'); // write this after executing
+ * },
+ * delay: 0.25, // delay this slightly behind above
+ * duration: 0.75, // duration should equal 1 sec w/ delay
+ * position: 'parallel', // the queue position is 'parallel'
+ * style: 'opacity: 1; color: orange;', // morph the text we inserted
+ * transition: 'easeInOutCubic' // a transition for the text morphing
+ * }),
+ * ],{
+ * duration: 1 // the overall length of this effect
+ * });
+ *
+ * <h4>Notes</h4>
+ *
+ * It is recommended that you set any effects position to "parallel" to ensure
+ * that it will be executed properly.
+ *
+ * As shown above, anything from [[S2.FX.Base]] can be applied to the parallel
+ * effect itself.
**/
S2.FX.Parallel = Class.create(S2.FX.Base, {
initialize: function($super, effects, options) {
@@ -12,7 +12,7 @@
<p>
This rewrite of the script.aculo.us library is in beta. While we advise to proceed with caution,
- scripty2 used in many live, production projects like <a href="http://twistori.com">twistori</a>
+ scripty2 is used in many live, production projects like <a href="http://twistori.com">twistori</a>
and <a href="http://letsfreckle.com">freckle</a> and it works great!
</p>
@@ -56,7 +56,7 @@
</p>
<p>
To use scripty2, include this line in your HTML:
- <pre><code>&lt;script src=&quot;prototype.scripty2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></pre>
+ <pre><code>&lt;script src=&quot;prototype.s2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></pre>
</p>
<p>
For debugging, you can also include the libraries seperately:

0 comments on commit 5ae2f3f

Please sign in to comment.