Loading ...
Sorry, an error occurred while loading the content.

YUI - Animation - To & Back

Expand Messages
  • loyalstarlight
    Hi guys, Very simple newbie question for someone. In the YUI Library there s an example provided for the Easing animation which changes the elements width from
    Message 1 of 14 , Aug 29, 2006
    • 0 Attachment
      Hi guys,

      Very simple newbie question for someone.

      In the YUI Library there's an example provided for the Easing
      animation which changes the elements width from 10px to 500px:

      http://developer.yahoo.com/yui/examples/animation/easing.html

      <---
      YAHOO.example.init = function() {
      var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
      YAHOO.util.Easing.bounceOut);
      YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
      };

      YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
      --->

      How would I go about making the second click change the elements width
      back from 500px to 10px? So essentially you click once to expand it
      and click again to return it to it's original state and then you can
      click again to expand it...and so on.
    • dav.glass@yahoo.com
      From the Animations onComplete.subscribe function, you could remove the click listener and add the new one... Here s an example:
      Message 2 of 14 , Aug 29, 2006
      • 0 Attachment
        From the Animations onComplete.subscribe function, you could remove the click listener and add the new one...

        Here's an example:
        http://blog.davglass.com/files/yui/animagain/
         
        Dav Glass
        dav.glass@...
        davglass.com
        618.694.3476

        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +


        ----- Original Message ----
        From: loyalstarlight <additionalvocals@...>
        To: ydn-javascript@yahoogroups.com
        Sent: Tuesday, August 29, 2006 1:30:56 PM
        Subject: [ydn-javascript] YUI - Animation - To & Back

        Hi guys,

        Very simple newbie question for someone.

        In the YUI Library there's an example provided for the Easing
        animation which changes the elements width from 10px to 500px:

        http://developer. yahoo.com/ yui/examples/ animation/ easing.html

        <---
        YAHOO.example. init = function() {
        var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
        YAHOO.util.Easing. bounceOut) ;
        YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
        };

        YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
        --->

        How would I go about making the second click change the elements width
        back from 500px to 10px? So essentially you click once to expand it
        and click again to return it to it's original state and then you can
        click again to expand it...and so on.


      • Matt Sweeney
        Hi, All you need to do is keep track of whether it is exanded, and adjust the target width accordingly. This can be done when the animation completes by
        Message 3 of 14 , Aug 29, 2006
        • 0 Attachment
          Hi,

          All you need to do is keep track of whether it is exanded, and adjust
          the target width accordingly. This can be done when the animation
          completes by subscribing to the onComplete customEvent.

          Something like:
          YAHOO.example.init = function() {
          var isExpanded = false;
          var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
          YAHOO.util.Easing.bounceOut);
          anim.onComplete.subscribe(
          function() {
          isExpanded = !isExpanded;
          this.attributes.width.to = (isExpanded) ? 10 : 500;
          }
          );
          YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
          };

          YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);

          Matt

          loyalstarlight wrote:

          >Hi guys,
          >
          >Very simple newbie question for someone.
          >
          >In the YUI Library there's an example provided for the Easing
          >animation which changes the elements width from 10px to 500px:
          >
          >http://developer.yahoo.com/yui/examples/animation/easing.html
          >
          ><---
          >YAHOO.example.init = function() {
          > var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
          >YAHOO.util.Easing.bounceOut);
          > YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
          >};
          >
          >YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
          >--->
          >
          >How would I go about making the second click change the elements width
          >back from 500px to 10px? So essentially you click once to expand it
          >and click again to return it to it's original state and then you can
          >click again to expand it...and so on.
          >
          >
          >
          >
          >
          >
          >Yahoo! Groups Links
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
        • Matt Sweeney
          hi Dav, Thanks for sharing you re example. You can achieve this effect with a single animation instance by changing the attributes property. This will
          Message 4 of 14 , Aug 29, 2006
          • 0 Attachment
            hi Dav,

            Thanks for sharing you're example.

            You can achieve this effect with a single animation instance by changing the "attributes" property.  This will simplify your code considerably.

            Something like:
            var isExpanded = false;

            var attributes = {
                width: { to: 300 },
                height: { to: 300 },
                top: { to: 300 },
                left: { to: 300 }
            };

            var attributes2 = {
                width: { to: 150 },
                height: { to: 150 },
                top: { to: 150 },
                left: { to: 150 }
            };

            var myAnim = new YAHOO.util.Anim('test1', attributes);

            myAnim.onComplete.subscribe(
               function() {
                  isExpanded = !isExpanded;
                  this.attributes = (isExpanded) ? attributes2 : attributes;
               }
            );

            YAHOO.util.Event.addListener('test1', 'click', function() {myAnim.animate()});

            Matt

            dav.glass@... wrote:
            From the Animations onComplete.subscribe function, you could remove the click listener and add the new one...

            Here's an example:
            http://blog.davglass.com/files/yui/animagain/
             
            Dav Glass
            dav.glass@...
            davglass.com
            618.694.3476

            + Windows: n. - The most successful computer virus, ever. +
            + A computer without a Microsoft operating system is like a dog
            without bricks tied to its head +
            + A Microsoft Certified Systems Engineer is to computing what a
            McDonalds Certified Food Specialist is to fine cuisine +


            ----- Original Message ----
            From: loyalstarlight <additionalvocals@...>
            To: ydn-javascript@yahoogroups.com
            Sent: Tuesday, August 29, 2006 1:30:56 PM
            Subject: [ydn-javascript] YUI - Animation - To & Back

            Hi guys,

            Very simple newbie question for someone.

            In the YUI Library there's an example provided for the Easing
            animation which changes the elements width from 10px to 500px:

            http://developer. yahoo.com/ yui/examples/ animation/ easing.html

            <---
            YAHOO.example. init = function() {
            var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
            YAHOO.util.Easing. bounceOut) ;
            YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
            };

            YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
            --->

            How would I go about making the second click change the elements width
            back from 500px to 10px? So essentially you click once to expand it
            and click again to return it to it's original state and then you can
            click again to expand it...and so on.



          • loyalstarlight
            Hi Matt and Dav, Thanks very much for helping me out. Matt, In your example, is there a way of refining the click function to a single element (eg. a link with
            Message 5 of 14 , Aug 29, 2006
            • 0 Attachment
              Hi Matt and Dav,

              Thanks very much for helping me out.

              Matt,

              In your example, is there a way of refining the click function to a
              single element (eg. a link with the id of 'demolink') so that the
              animation only takes effect upon clicking that? Right now it plays out
              when you click any where on the page.

              --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
              >
              > Hi,
              >
              > All you need to do is keep track of whether it is exanded, and adjust
              > the target width accordingly. This can be done when the animation
              > completes by subscribing to the onComplete customEvent.
              >
              > Something like:
              > YAHOO.example.init = function() {
              > var isExpanded = false;
              > var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
              > YAHOO.util.Easing.bounceOut);
              > anim.onComplete.subscribe(
              > function() {
              > isExpanded = !isExpanded;
              > this.attributes.width.to = (isExpanded) ? 10 : 500;
              > }
              > );
              > YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
              > };
              >
              > YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
              >
              > Matt
              >
              > loyalstarlight wrote:
              >
              > >Hi guys,
              > >
              > >Very simple newbie question for someone.
              > >
              > >In the YUI Library there's an example provided for the Easing
              > >animation which changes the elements width from 10px to 500px:
              > >
              > >http://developer.yahoo.com/yui/examples/animation/easing.html
              > >
              > ><---
              > >YAHOO.example.init = function() {
              > > var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
              > >YAHOO.util.Easing.bounceOut);
              > > YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
              > >};
              > >
              > >YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
              > >--->
              > >
              > >How would I go about making the second click change the elements width
              > >back from 500px to 10px? So essentially you click once to expand it
              > >and click again to return it to it's original state and then you can
              > >click again to expand it...and so on.
              > >
              > >
              > >
              > >
              > >
              > >
              > >Yahoo! Groups Links
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              > >
              >
            • dav.glass@yahoo.com
              The listener is being added to the page or document. If you want to add it to the link called demolink, then the code would look like this: YAHOO.util.Event.
              Message 6 of 14 , Aug 29, 2006
              • 0 Attachment
                The listener is being added to the "page" or document. If you want to add it to the link called demolink, then the code would look like this:

                YAHOO.util.Event. on('demolink', 'click', anim.animate, anim, true);

                Also, remember that you have to stop the event in the function bound to the listener or the href will be fired..

                example:

                YAHOO.util.Event. on('demolink', 'click', animThis, anim, true);

                function animThis(ev) {
                    anim.animate();
                    YAHOO.util.Event.stopEvent(ev);
                }

                Dav Glass
                dav.glass@...
                davglass.com
                618.694.3476

                + Windows: n. - The most successful computer virus, ever. +
                + A computer without a Microsoft operating system is like a dog
                without bricks tied to its head +
                + A Microsoft Certified Systems Engineer is to computing what a
                McDonalds Certified Food Specialist is to fine cuisine +


                ----- Original Message ----
                From: loyalstarlight <additionalvocals@...>
                To: ydn-javascript@yahoogroups.com
                Sent: Tuesday, August 29, 2006 3:31:11 PM
                Subject: [ydn-javascript] Re: YUI - Animation - To & Back

                Hi Matt and Dav,

                Thanks very much for helping me out.

                Matt,

                In your example, is there a way of refining the click function to a
                single element (eg. a link with the id of 'demolink') so that the
                animation only takes effect upon clicking that? Right now it plays out
                when you click any where on the page.

                --- In ydn-javascript@ yahoogroups. com, Matt Sweeney <msweeney@.. .> wrote:
                >
                > Hi,
                >
                > All you need to do is keep track of whether it is exanded, and adjust
                > the target width accordingly. This can be done when the animation
                > completes by subscribing to the onComplete customEvent.
                >
                > Something like:
                > YAHOO.example. init = function() {
                > var isExpanded = false;
                > var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                > YAHOO.util.Easing. bounceOut) ;
                > anim.onComplete. subscribe(
                > function() {
                > isExpanded = !isExpanded;
                > this.attributes. width.to = (isExpanded) ? 10 : 500;
                > }
                > );
                > YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                > };
                >
                > YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                >
                > Matt
                >
                > loyalstarlight wrote:
                >
                > >Hi guys,
                > >
                > >Very simple newbie question for someone.
                > >
                > >In the YUI Library there's an example provided for the Easing
                > >animation which changes the elements width from 10px to 500px:
                > >
                > >http://developer. yahoo.com/ yui/examples/ animation/ easing.html
                > >
                > ><---
                > >YAHOO.example. init = function() {
                > > var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                > >YAHOO.util. Easing.bounceOut );
                > > YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                > >};
                > >
                > >YAHOO.util. Event.onAvailabl e('demo', YAHOO.example. init);
                > >--->
                > >
                > >How would I go about making the second click change the elements width
                > >back from 500px to 10px? So essentially you click once to expand it
                > >and click again to return it to it's original state and then you can
                > >click again to expand it...and so on.
                > >
                > >
                > >
                > >
                > >
                > >
                > >Yahoo! Groups Links
                > >
                > >
                > >
                > >
                > >
                > >
                > >
                > >
                > >
                > >
                >


              • dav.glass@yahoo.com
                Matt -- Good call, I hadn t thought of that 8-) Thanks for the heads up.. Dav Glass dav.glass@yahoo.com davglass.com 618.694.3476 + Windows: n. - The most
                Message 7 of 14 , Aug 29, 2006
                • 0 Attachment
                  Matt --

                  Good call, I hadn't thought of that 8-)

                  Thanks for the heads up..
                   
                  Dav Glass
                  dav.glass@...
                  davglass.com
                  618.694.3476

                  + Windows: n. - The most successful computer virus, ever. +
                  + A computer without a Microsoft operating system is like a dog
                  without bricks tied to its head +
                  + A Microsoft Certified Systems Engineer is to computing what a
                  McDonalds Certified Food Specialist is to fine cuisine +


                  ----- Original Message ----
                  From: Matt Sweeney <msweeney@...>
                  To: ydn-javascript@yahoogroups.com
                  Sent: Tuesday, August 29, 2006 2:18:27 PM
                  Subject: Re: [ydn-javascript] YUI - Animation - To & Back

                  hi Dav,

                  Thanks for sharing you're example.

                  You can achieve this effect with a single animation instance by changing the "attributes" property.  This will simplify your code considerably.

                  Something like:
                  var isExpanded = false;

                  var attributes = {
                      width: { to: 300 },
                      height: { to: 300 },
                      top: { to: 300 },
                      left: { to: 300 }
                  };

                  var attributes2 = {
                      width: { to: 150 },
                      height: { to: 150 },
                      top: { to: 150 },
                      left: { to: 150 }
                  };

                  var myAnim = new YAHOO.util.Anim( 'test1', attributes);

                  myAnim.onComplete. subscribe(
                     function() {
                        isExpanded = !isExpanded;
                        this.attributes = (isExpanded) ? attributes2 : attributes;
                     }
                  );

                  YAHOO.util.Event. addListener( 'test1', 'click', function() {myAnim.animate( )});

                  Matt

                  dav.glass@yahoo. com wrote:

                  From the Animations onComplete.subscrib e function, you could remove the click listener and add the new one...

                  Here's an example:
                  http://blog. davglass. com/files/ yui/animagain/
                   
                  Dav Glass
                  dav.glass@yahoo. com
                  davglass.com
                  618.694.3476

                  + Windows: n. - The most successful computer virus, ever. +
                  + A computer without a Microsoft operating system is like a dog
                  without bricks tied to its head +
                  + A Microsoft Certified Systems Engineer is to computing what a
                  McDonalds Certified Food Specialist is to fine cuisine +


                  ----- Original Message ----
                  From: loyalstarlight <additionalvocals@ hotmail.com>
                  To: ydn-javascript@ yahoogroups. com
                  Sent: Tuesday, August 29, 2006 1:30:56 PM
                  Subject: [ydn-javascript] YUI - Animation - To & Back

                  Hi guys,

                  Very simple newbie question for someone.

                  In the YUI Library there's an example provided for the Easing
                  animation which changes the elements width from 10px to 500px:

                  http://developer. yahoo.com/ yui/examples/ animation/ easing.html

                  <---
                  YAHOO.example. init = function() {
                  var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                  YAHOO.util.Easing. bounceOut) ;
                  YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                  };

                  YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                  --->

                  How would I go about making the second click change the elements width
                  back from 500px to 10px? So essentially you click once to expand it
                  and click again to return it to it's original state and then you can
                  click again to expand it...and so on.




                • dav.glass@yahoo.com
                  Matt-- I updated my example to reflect your advise.. Thanks again.. http://blog.davglass.com/files/yui/animagain/ Dav Glass dav.glass@yahoo.com davglass.com
                  Message 8 of 14 , Aug 29, 2006
                  • 0 Attachment
                    Matt--

                    I updated my example to reflect your advise.. Thanks again..
                    Dav Glass
                    dav.glass@...
                    davglass.com
                    618.694.3476

                    + Windows: n. - The most successful computer virus, ever. +
                    + A computer without a Microsoft operating system is like a dog
                    without bricks tied to its head +
                    + A Microsoft Certified Systems Engineer is to computing what a
                    McDonalds Certified Food Specialist is to fine cuisine +


                    ----- Original Message ----
                    From: Matt Sweeney <msweeney@...>
                    To: ydn-javascript@yahoogroups.com
                    Sent: Tuesday, August 29, 2006 2:18:27 PM
                    Subject: Re: [ydn-javascript] YUI - Animation - To & Back

                    hi Dav,

                    Thanks for sharing you're example.

                    You can achieve this effect with a single animation instance by changing the "attributes" property.  This will simplify your code considerably.

                    Something like:
                    var isExpanded = false;

                    var attributes = {
                        width: { to: 300 },
                        height: { to: 300 },
                        top: { to: 300 },
                        left: { to: 300 }
                    };

                    var attributes2 = {
                        width: { to: 150 },
                        height: { to: 150 },
                        top: { to: 150 },
                        left: { to: 150 }
                    };

                    var myAnim = new YAHOO.util.Anim( 'test1', attributes);

                    myAnim.onComplete. subscribe(
                       function() {
                          isExpanded = !isExpanded;
                          this.attributes = (isExpanded) ? attributes2 : attributes;
                       }
                    );

                    YAHOO.util.Event. addListener( 'test1', 'click', function() {myAnim.animate( )});

                    Matt

                    dav.glass@yahoo. com wrote:

                    From the Animations onComplete.subscrib e function, you could remove the click listener and add the new one...

                    Here's an example:
                    http://blog. davglass. com/files/ yui/animagain/
                     
                    Dav Glass
                    dav.glass@yahoo. com
                    davglass.com
                    618.694.3476

                    + Windows: n. - The most successful computer virus, ever. +
                    + A computer without a Microsoft operating system is like a dog
                    without bricks tied to its head +
                    + A Microsoft Certified Systems Engineer is to computing what a
                    McDonalds Certified Food Specialist is to fine cuisine +


                    ----- Original Message ----
                    From: loyalstarlight <additionalvocals@ hotmail.com>
                    To: ydn-javascript@ yahoogroups. com
                    Sent: Tuesday, August 29, 2006 1:30:56 PM
                    Subject: [ydn-javascript] YUI - Animation - To & Back

                    Hi guys,

                    Very simple newbie question for someone.

                    In the YUI Library there's an example provided for the Easing
                    animation which changes the elements width from 10px to 500px:

                    http://developer. yahoo.com/ yui/examples/ animation/ easing.html

                    <---
                    YAHOO.example. init = function() {
                    var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                    YAHOO.util.Easing. bounceOut) ;
                    YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                    };

                    YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                    --->

                    How would I go about making the second click change the elements width
                    back from 500px to 10px? So essentially you click once to expand it
                    and click again to return it to it's original state and then you can
                    click again to expand it...and so on.




                  • Jack Slocum
                    Or you could use the YAHOO.ext (Yahoo! UI extensions) library and it could be this code: var test1 = YAHOO.ext.Element.get( test1 ); test1.addListener( click ,
                    Message 9 of 14 , Aug 30, 2006
                    • 0 Attachment

                      Or you could use the YAHOO.ext (Yahoo! UI extensions) library and it could be this code:

                      var test1 = YAHOO.ext.Element.get('test1');
                      test1.addListener('click', function(){
                          test1.setWidth(test1.getWidth() >= 500 ? 10 : 500, true);
                      });

                      The last param 'true' is whether to animate. You can pass additional parameters to customize the animation.

                      Take a look, it will save you many keystrokes and has some very useful features.
                      ---
                      Jack Slocum
                      Yahoo! UI - Beyond the Examples
                      http://www.jackslocum.com/yui


                      --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                      >
                      > hi Dav,
                      >
                      > Thanks for sharing you're example.
                      >
                      > You can achieve this effect with a single animation instance by changing
                      > the "attributes" property. This will simplify your code considerably.
                      >
                      > Something like:
                      > var isExpanded = false;
                      >
                      > var attributes = {
                      > width: { to: 300 },
                      > height: { to: 300 },
                      > top: { to: 300 },
                      > left: { to: 300 }
                      > };
                      >
                      > var attributes2 = {
                      > width: { to: 150 },
                      > height: { to: 150 },
                      > top: { to: 150 },
                      > left: { to: 150 }
                      > };
                      >
                      > var myAnim = new YAHOO.util.Anim('test1', attributes);
                      >
                      > myAnim.onComplete.subscribe(
                      > function() {
                      > isExpanded = !isExpanded;
                      > this.attributes = (isExpanded) ? attributes2 : attributes;
                      > }
                      > );
                      >
                      > YAHOO.util.Event.addListener('test1', 'click', function()
                      > {myAnim.animate()});
                      >
                      > Matt
                      >
                      > dav.glass@... wrote:
                      >
                      > > From the Animations onComplete.subscribe function, you could remove
                      > > the click listener and add the new one...
                      > >
                      > > Here's an example:
                      > > http://blog.davglass.com/files/yui/animagain/
                      > >
                      > > Dav Glass
                      > > dav.glass@...
                      > > davglass.com
                      > > 618.694.3476
                      > >
                      > > + Windows: n. - The most successful computer virus, ever. +
                      > > + A computer without a Microsoft operating system is like a dog
                      > > without bricks tied to its head +
                      > > + A Microsoft Certified Systems Engineer is to computing what a
                      > > McDonalds Certified Food Specialist is to fine cuisine +
                      > >
                      > >
                      > > ----- Original Message ----
                      > > From: loyalstarlight additionalvocals@...
                      > > To: ydn-javascript@yahoogroups.com
                      > > Sent: Tuesday, August 29, 2006 1:30:56 PM
                      > > Subject: [ydn-javascript] YUI - Animation - To & Back
                      > >
                      > > Hi guys,
                      > >
                      > > Very simple newbie question for someone.
                      > >
                      > > In the YUI Library there's an example provided for the Easing
                      > > animation which changes the elements width from 10px to 500px:
                      > >
                      > > http://developer. yahoo.com/ yui/examples/ animation/ easing.html
                      > > <http://developer.yahoo.com/yui/examples/animation/easing.html>
                      > >
                      > > <---
                      > > YAHOO.example. init = function() {
                      > > var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                      > > YAHOO.util.Easing. bounceOut) ;
                      > > YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                      > > };
                      > >
                      > > YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                      > > --->
                      > >
                      > > How would I go about making the second click change the elements width
                      > > back from 500px to 10px? So essentially you click once to expand it
                      > > and click again to return it to it's original state and then you can
                      > > click again to expand it...and so on.
                      > >
                      > >
                      > >
                      >

                    • Matt Sweeney
                      Hi Jack, That looks good, but doesn t accomplish Dav s task, which changes other attributes beyond width. The task you demonstrate can be easily accomplished
                      Message 10 of 14 , Aug 30, 2006
                      • 0 Attachment
                        Hi Jack,

                        That looks good,  but doesn't accomplish Dav's task, which changes other attributes beyond width.  

                        The task you demonstrate can be easily accomplished without any extensions:

                        var anim = new YAHOO.util.Anim('demo');

                        YAHOO.util.Event.on('demo', 'click', function() {
                           anim.attributes.width = { to: ( anim.getEl().offsetWidth  >= 500  ? 10 : 500 ) };
                           anim.animate();
                        });

                        Using this same approach, other attributes (and properties such as "duration", "method (easing)", etc.) can be modified at runtime as well.

                        Matt


                        Jack Slocum wrote:

                        Or you could use the YAHOO.ext (Yahoo! UI extensions) library and it could be this code:

                        var test1 = YAHOO.ext.Element.get('test1');
                        test1.addListener('click', function(){
                            test1.setWidth(test1.getWidth() >= 500 ? 10 : 500, true);
                        });

                        The last param 'true' is whether to animate. You can pass additional parameters to customize the animation.

                        Take a look, it will save you many keystrokes and has some very useful features.
                        ---
                        Jack Slocum
                        Yahoo! UI - Beyond the Examples
                        http://www.jackslocum.com/yui


                        --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                        >
                        > hi Dav,
                        >
                        > Thanks for sharing you're example.
                        >
                        > You can achieve this effect with a single animation instance by changing
                        > the "attributes" property. This will simplify your code considerably.
                        >
                        > Something like:
                        > var isExpanded = false;
                        >
                        > var attributes = {
                        > width: { to: 300 },
                        > height: { to: 300 },
                        > top: { to: 300 },
                        > left: { to: 300 }
                        > };
                        >
                        > var attributes2 = {
                        > width: { to: 150 },
                        > height: { to: 150 },
                        > top: { to: 150 },
                        > left: { to: 150 }
                        > };
                        >
                        > var myAnim = new YAHOO.util.Anim('test1', attributes);
                        >
                        > myAnim.onComplete.subscribe(
                        > function() {
                        > isExpanded = !isExpanded;
                        > this.attributes = (isExpanded) ? attributes2 : attributes;
                        > }
                        > );
                        >
                        > Y! AHOO.util.Event.addListener('test1', 'click', function()
                        > {myAnim.animate()});
                        >
                        > Matt
                        >
                        > dav.glass@... wrote:
                        >
                        > > From the Animations onComplete.subscribe function, you could remove
                        > > the click listener and add the new one...
                        > >
                        > > Here's an example:
                        > > http://blog.davglass.com/files/yui/animagain/
                        > >
                        > > Dav Glass
                        > > dav.glass@...
                        > > davglass.com
                        > > 618.694.3476
                        > >
                        > > + Windows: n. - The most successful computer virus, ever. +
                        > > + A computer without a Microsoft operating system is like a dog
                        > > without bricks tied to its head +
                        > > + A Microsoft Certified Systems Engineer is to computing what a
                        > > McDonalds Certified Food Specialist is to fine cuisine +
                        > >
                        > >
                        > > ----- Original Message ----
                        > > From: loyalstarlight additionalvocals@! ...
                        > > To: ydn-javascript@yahoogroups.com
                        > > Sent: Tuesday, August 29, 2006 1:30:56 PM
                        > > Subject: [ydn-javascript] YUI - Animation - To & Back
                        > >
                        > > Hi guys,
                        > >
                        > > Very simple newbie question for someone.
                        > >
                        > > In the YUI Library there's an example provided for the Easing
                        > > animation which changes the elements width from 10px to 500px:
                        > >
                        > > http://developer. yahoo.com/ yui/examples/ animation/ easing.html
                        > > <http://developer.yahoo.com/yui/examples/animation/easing.html>
                        > >
                        > > <---
                        > > YAHOO.example. init = function() {
                        > > var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 1,
                        > > YAHOO.util.Easing. bounceOut) ;
                        > > YAHOO.util.Event. on(document, 'click', anim.animate, anim, true);
                        > > };
                        > >
                        > > YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                        > > --->
                        > >
                        > > How ! would I go about making the second click change the elements width
                        > > back from 500px to 10px? So essentially you click once to expand it
                        > > and click again to return it to it's original state and then you can
                        > > click again to expand it...and so on.
                        > >
                        > >
                        > >
                        >


                      • Jack Slocum
                        Sorry, I didn t see Dave s example. For Dave s task it s almost identical: var test1 = getEl( test1 ); test1.on( click , function(){ test1.getWidth = 300 ?
                        Message 11 of 14 , Aug 30, 2006
                        • 0 Attachment
                          Sorry, I didn't see Dave's example. For Dave's task it's almost
                          identical:

                          var test1 = getEl('test1');
                          test1.on('click', function(){
                          test1.getWidth >= 300 ?
                          test1.setBounds(150, 150, 150, 150, true) :
                          test1.setBounds(300, 300, 300, 300, true);
                          });

                          The cool thing about the extensions are he can do more if he wanted
                          to with very minimal extra code.

                          For example, suppose when it was clicked he wanted to resize it and
                          one second after resizing it he wanted to make it fade out.

                          var test1 = new YAHOO.ext.Actor('test1', null, true);
                          test1.on('click', function(){
                          test1.setBounds(150, 150, 150, 150, true);
                          test1.pause(1);
                          test1.hide(true);
                          test1.play();
                          });

                          With the combinations of callbacks and setTimeout required to do it
                          without the extensions library, an animation sequence as simple this
                          can become quite a mess.

                          ---
                          Jack Slocum
                          Yahoo! UI - Beyond the Examples
                          http://www.jackslocum.com/yui


                          --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...>
                          wrote:
                          >
                          > Hi Jack,
                          >
                          > That looks good, but doesn't accomplish Dav's task, which changes
                          other
                          > attributes beyond width.
                          >
                          > The task you demonstrate can be easily accomplished without any
                          extensions:
                          >
                          > var anim = new YAHOO.util.Anim('demo');
                          >
                          > YAHOO.util.Event.on('demo', 'click', function() {
                          > anim.attributes.width = { to: ( anim.getEl().offsetWidth >=
                          500 ?
                          > 10 : 500 ) };
                          > anim.animate();
                          > });
                          >
                          > Using this same approach, other attributes (and properties such as
                          > "duration", "method (easing)", etc.) can be modified at runtime as
                          well.
                          >
                          > Matt
                          >
                          >
                          > Jack Slocum wrote:
                          >
                          > > Or you could use the YAHOO.ext (Yahoo! UI extensions) library and
                          it
                          > > could be this code:
                          > >
                          > > var test1 = YAHOO.ext.Element.get('test1');
                          > > test1.addListener('click', function(){
                          > > test1.setWidth(test1.getWidth() >= 500 ? 10 : 500, true);
                          > > });
                          > >
                          > > The last param 'true' is whether to animate. You can pass
                          additional
                          > > parameters to customize the animation.
                          > >
                          > > Take a look, it will save you many keystrokes and has some very
                          useful
                          > > features.
                          > > ---
                          > > Jack Slocum
                          > > Yahoo! UI - Beyond the Examples
                          > > http://www.jackslocum.com/yui
                          > >
                          > >
                          > > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@>
                          wrote:
                          > > >
                          > > > hi Dav,
                          > > >
                          > > > Thanks for sharing you're example.
                          > > >
                          > > > You can achieve this effect with a single animation instance by
                          > > changing
                          > > > the "attributes" property. This will simplify your code
                          considerably.
                          > > >
                          > > > Something like:
                          > > > var isExpanded = false;
                          > > >
                          > > > var attributes = {
                          > > > width: { to: 300 },
                          > > > height: { to: 300 },
                          > > > top: { to: 300 },
                          > > > left: { to: 300 }
                          > > > };
                          > > >
                          > > > var attributes2 = {
                          > > > width: { to: 150 },
                          > > > height: { to: 150 },
                          > > > top: { to: 150 },
                          > > > left: { to: 150 }
                          > > > };
                          > > >
                          > > > var myAnim = new YAHOO.util.Anim('test1', attributes);
                          > > >
                          > > > myAnim.onComplete.subscribe(
                          > > > function() {
                          > > > isExpanded = !isExpanded;
                          > > > this.attributes = (isExpanded) ? attributes2 : attributes;
                          > > > }
                          > > > );
                          > > >
                          > > > Y! AHOO.util.Event.addListener('test1', 'click', function()
                          > > > {myAnim.animate()});
                          > > >
                          > > > Matt
                          > > >
                          > > > dav.glass@ wrote:
                          > > >
                          > > > > From the Animations onComplete.subscribe function, you could
                          remove
                          > > > > the click listener and add the new one...
                          > > > >
                          > > > > Here's an example:
                          > > > > http://blog.davglass.com/files/yui/animagain/
                          > > > >
                          > > > > Dav Glass
                          > > > > dav.glass@
                          > > > > davglass.com
                          > > > > 618.694.3476
                          > > > >
                          > > > > + Windows: n. - The most successful computer virus, ever. +
                          > > > > + A computer without a Microsoft operating system is like a
                          dog
                          > > > > without bricks tied to its head +
                          > > > > + A Microsoft Certified Systems Engineer is to computing what
                          a
                          > > > > McDonalds Certified Food Specialist is to fine cuisine +
                          > > > >
                          > > > >
                          > > > > ----- Original Message ----
                          > > > > From: loyalstarlight additionalvocals@! ...
                          > > > > To: ydn-javascript@yahoogroups.com
                          > > > > Sent: Tuesday, August 29, 2006 1:30:56 PM
                          > > > > Subject: [ydn-javascript] YUI - Animation - To & Back
                          > > > >
                          > > > > Hi guys,
                          > > > >
                          > > > > Very simple newbie question for someone.
                          > > > >
                          > > > > In the YUI Library there's an example provided for the Easing
                          > > > > animation which changes the elements width from 10px to 500px:
                          > > > >
                          > > > > http://developer. yahoo.com/ yui/examples/ animation/
                          easing.html
                          > > > >
                          <http://developer.yahoo.com/yui/examples/animation/easing.html>
                          > > > >
                          > > > > <---
                          > > > > YAHOO.example. init = function() {
                          > > > > var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} },
                          1,
                          > > > > YAHOO.util.Easing. bounceOut) ;
                          > > > > YAHOO.util.Event. on(document, 'click', anim.animate, anim,
                          true);
                          > > > > };
                          > > > >
                          > > > > YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                          > > > > --->
                          > > > >
                          > > > > How ! would I go about making the second click change the
                          elements
                          > > width
                          > > > > back from 500px to 10px? So essentially you click once to
                          expand it
                          > > > > and click again to return it to it's original state and then
                          you can
                          > > > > click again to expand it...and so on.
                          > > > >
                          > > > >
                          > > > >
                          > > >
                          > >
                          > >
                          >
                        • Matt Sweeney
                          I m sure your stuff works as advertised, but the message here is that it is a simple process to modify an Anim s attributes (and other properties) at runtime
                          Message 12 of 14 , Aug 30, 2006
                          • 0 Attachment
                            I'm sure your stuff works as advertised, but the message here is that it is a simple process to modify an Anim's attributes (and other properties) at runtime (without 3rd party extensions).

                            To simplify Dav's case further:

                            var attributes = {
                                width: { to: 300 }, height: { to: 300 },
                                top: { to: 300 }, left: { to: 300 }
                            };

                            var attributes2 = {
                                width: { to: 150 }, height: { to: 150 },
                                top: { to: 150 }, left: { to: 150 }
                            };

                            var myAnim = new YAHOO.util.Anim('test1', attributes);

                            YAHOO.util.Event.addListener('test1', 'click', function() {
                               myAnim.attributes = (this.offsetWidth >= 300) ? attributes2 : attributes;
                               myAnim.animate();
                            });

                            With the combinations of callbacks and setTimeout required to do it 
                            without the extensions library, an animation sequence as simple this 
                            can become quite a mess. 
                            It's not so bad really:

                            var test1 = new YAHOO.util.Anim('test1',
                               {
                                   width: { to: 150 }, height: { to: 150 },
                                   top: { to: 150 }, left: { to: 150 }
                               }
                            );

                            test1.onComplete.subscribe(function() {
                               test1.attributes = {opacity: {to: 0}};
                               setTimeout(function() {test1.animate()}, 1000);
                            });

                            YAHOO.util.Event.on('test1', 'click', function(){
                                test1.animate();
                            });

                            Matt

                            Jack Slocum wrote:
                            Sorry, I didn't see Dave's example. For Dave's task it's almost 
                            identical:
                            
                            var test1 = getEl('test1');
                            test1.on('click', function(){
                                test1.getWidth >= 300 ?
                                   test1.setBounds(150, 150, 150, 150, true) :
                                   test1.setBounds(300, 300, 300, 300, true);
                            });
                            
                            The cool thing about the extensions are he can do more if he wanted 
                            to with very minimal extra code.
                            
                            For example, suppose when it was clicked he wanted to resize it and 
                            one second after resizing it he wanted to make it fade out. 
                            
                            var test1 = new YAHOO.ext.Actor('test1', null, true);
                            test1.on('click', function(){
                                test1.setBounds(150, 150, 150, 150, true);
                                test1.pause(1);
                                test1.hide(true);
                                test1.play();
                            });
                            
                            With the combinations of callbacks and setTimeout required to do it 
                            without the extensions library, an animation sequence as simple this 
                            can become quite a mess. 
                            
                            ---
                            Jack Slocum
                            Yahoo! UI - Beyond the Examples
                            http://www.jackslocum.com/yui
                            
                            
                            --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> 
                            wrote:
                              
                            Hi Jack,
                            
                            That looks good,  but doesn't accomplish Dav's task, which changes 
                                
                            other 
                              
                            attributes beyond width.  
                            
                            The task you demonstrate can be easily accomplished without any 
                                
                            extensions:
                              
                            var anim = new YAHOO.util.Anim('demo');
                            
                            YAHOO.util.Event.on('demo', 'click', function() {
                               anim.attributes.width = { to: ( anim.getEl().offsetWidth  >= 
                                
                            500  ? 
                              
                            10 : 500 ) };
                               anim.animate();
                            });
                            
                            Using this same approach, other attributes (and properties such as 
                            "duration", "method (easing)", etc.) can be modified at runtime as 
                                
                            well.
                              
                            Matt
                            
                            
                            Jack Slocum wrote:
                            
                                
                            Or you could use the YAHOO.ext (Yahoo! UI extensions) library and 
                                  
                            it 
                              
                            could be this code:
                            
                            var test1 = YAHOO.ext.Element.get('test1');
                            test1.addListener('click', function(){
                                test1.setWidth(test1.getWidth() >= 500 ? 10 : 500, true);
                            });
                            
                            The last param 'true' is whether to animate. You can pass 
                                  
                            additional 
                              
                            parameters to customize the animation.
                            
                            Take a look, it will save you many keystrokes and has some very 
                                  
                            useful 
                              
                            features.
                            ---
                            Jack Slocum
                            Yahoo! UI - Beyond the Examples
                            http://www.jackslocum.com/yui
                            
                            
                            --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> 
                                  
                            wrote:
                              
                            hi Dav,
                            
                            Thanks for sharing you're example.
                            
                            You can achieve this effect with a single animation instance by 
                                    
                            changing
                                  
                            the "attributes" property. This will simplify your code 
                                    
                            considerably.
                              
                            Something like:
                            var isExpanded = false;
                            
                            var attributes = {
                            width: { to: 300 },
                            height: { to: 300 },
                            top: { to: 300 },
                            left: { to: 300 }
                            };
                            
                            var attributes2 = {
                            width: { to: 150 },
                            height: { to: 150 },
                            top: { to: 150 },
                            left: { to: 150 }
                            };
                            
                            var myAnim = new YAHOO.util.Anim('test1', attributes);
                            
                            myAnim.onComplete.subscribe(
                            function() {
                            isExpanded = !isExpanded;
                            this.attributes = (isExpanded) ? attributes2 : attributes;
                            }
                            );
                            
                            Y! AHOO.util.Event.addListener('test1', 'click', function()
                            {myAnim.animate()});
                            
                            Matt
                            
                            dav.glass@ wrote:
                            
                                    
                            From the Animations onComplete.subscribe function, you could 
                                      
                            remove
                              
                            the click listener and add the new one...
                            
                            Here's an example:
                            http://blog.davglass.com/files/yui/animagain/
                            
                            Dav Glass
                            dav.glass@
                            davglass.com
                            618.694.3476
                            
                            + Windows: n. - The most successful computer virus, ever. +
                            + A computer without a Microsoft operating system is like a 
                                      
                            dog
                              
                            without bricks tied to its head +
                            + A Microsoft Certified Systems Engineer is to computing what 
                                      
                            a
                              
                            McDonalds Certified Food Specialist is to fine cuisine +
                            
                            
                            ----- Original Message ----
                            From: loyalstarlight additionalvocals@! ...
                            To: ydn-javascript@yahoogroups.com
                            Sent: Tuesday, August 29, 2006 1:30:56 PM
                            Subject: [ydn-javascript] YUI - Animation - To & Back
                            
                            Hi guys,
                            
                            Very simple newbie question for someone.
                            
                            In the YUI Library there's an example provided for the Easing
                            animation which changes the elements width from 10px to 500px:
                            
                            http://developer. yahoo.com/ yui/examples/ animation/ 
                                      
                            easing.html
                              
                            <http://developer.yahoo.com/yui/examples/animation/easing.html>
                              
                            <---
                            YAHOO.example. init = function() {
                            var anim = new YAHOO.util.Anim( 'demo', { width: {to: 500} }, 
                                      
                            1,
                              
                            YAHOO.util.Easing. bounceOut) ;
                            YAHOO.util.Event. on(document, 'click', anim.animate, anim, 
                                      
                            true);
                              
                            };
                            
                            YAHOO.util.Event. onAvailable( 'demo', YAHOO.example. init);
                            --->
                            
                            How ! would I go about making the second click change the 
                                      
                            elements 
                              
                            width
                                  
                            back from 500px to 10px? So essentially you click once to 
                                      
                            expand it
                              
                            and click again to return it to it's original state and then 
                                      
                            you can
                              
                            click again to expand it...and so on.
                            
                            
                            
                                      
                                  
                            
                            
                            
                            
                            
                            
                             
                            Yahoo! Groups Links
                            
                            <*> To visit your group on the web, go to:
                                http://groups.yahoo.com/group/ydn-javascript/
                            
                            <*> To unsubscribe from this group, send an email to:
                                ydn-javascript-unsubscribe@yahoogroups.com
                            
                            <*> Your use of Yahoo! Groups is subject to:
                                http://docs.yahoo.com/info/terms/
                             
                            
                            
                            
                            
                              

                          • Jack Slocum
                            ... I agree 100%. But when I look at this: var test1 = new YAHOO.util.Anim( test1 , { width: { to: 150 }, height: { to: 150 }, top: { to: 150 }, left: { to:
                            Message 13 of 14 , Aug 30, 2006
                            • 0 Attachment

                              > the message here is that it
                              > is a simple process to modify an Anim's attributes (and other
                              > properties) at runtime (without 3rd party extensions).

                              I agree 100%.

                              But when I look at this:

                              var test1 = new YAHOO.util.Anim('test1', 
                               
                               {
                                   width: { to: 150 }, height: { to: 150 },
                                  top: { to: 150 }, left: { to: 150 }
                                  }
                              );
                               
                              test1.onComplete.subscribe(function() {
                                      test1.attributes = {opacity: {to: 0}};
                                      setTimeout( function() {test1.animate()}, 1000);
                              });

                              YAHOO.util.Event.on('test1', 'click', function(){
                                      test1.animate();
                              });

                              and compare it to this:

                              var test1 = new YAHOO.ext.Actor('test1', null, true);
                              test1.on('click', function(){
                                      test1.setBounds(150, 150, 150, 150, true);
                                      test1.pause(1);
                                      test1.hide(true);
                                      test1.play();
                              });

                              I see two things:
                              1) Because of the callbacks when doing multiple animations, the default way is more prone to programmer error. For example, the code you posted creates an infinite loop. 

                              2) I can look at my code and know exactly what is happening instantly. The code flows exactly like it executes. While your example is pretty easy to figure out, it does take a moment to follow the different paths. When you have alot of animations (say you are writing a game like Dave) or you need to animate a bunch of different elements along the same timeline, then the benefits of using my extensions are more readily apparent.

                              I'm not trying to sell anything. All my code is open source. I only come in here to try to offer help to people who are having problems with their javascript code. If I think something I have already done will help them with what they are doing, I point them in that direction.

                               ---
                              Jack Slocum
                              Yahoo! UI - Beyond the Examples
                              http://www.jackslocum.com/yui

                            • Matt Sweeney
                              Hey Jack, ... Ahh yes, good point. I forgot to unsubscribe the callback. Should do something more like: var test1 = new YAHOO.util.Anim( test1 , { width: {
                              Message 14 of 14 , Aug 30, 2006
                              • 0 Attachment
                                Hey Jack,

                                I see two things:
                                1) Because of the callbacks when doing multiple animations, the default way is more prone to programmer error. For example, the code you posted creates an infinite loop. 

                                Ahh yes, good point.  I forgot to unsubscribe the callback.  Should do something  more like:
                                var test1 = new YAHOO.util.Anim('test1',
                                   {
                                     width: { to: 150 }, height: { to: 150 },
                                    top: { to: 150 }, left: { to: 150 }
                                    }
                                );

                                var fadeOut = function() {
                                     test1.attributes = {opacity: {to: 0}};
                                     setTimeout( function() {test1.animate()}, 1000);
                                     test1.onComplete.unsubscribe(fadeOut);
                                };

                                test1.onComplete.subscribe(fadeOut);

                                YAHOO.util.Event.on('test1', 'click', function(){test1.animate();});


                                This does highlight the need to have a simpler way to hook in a "one-time" callback.   That doesn't necessarily require more abstraction to implement though.

                                2) I can look at my code and know exactly what is happening instantly. The code flows exactly like it executes. While your example is pretty easy to figure out, it does take a moment to follow the different paths. When you have alot of animations (say you are writing a game like Dave) or you need to animate a bunch of different elements along the same timeline, ! then the benefits of using my extensions are more readily apparent.
                                Only because you know how your extensions work.  If I was to try and implement this with your extensions, I may end up mixing up the order of the args in "setBound", etc.  I know how "setTimeout" works, but wouldn't necessarily assume that "pause" does the same.  I'm sure the extra level of abstraction comes in handy at some point, but in this case isn't really necessary.  There are other advantages of using the callback model that you don't get with a purely declarative approach.

                                I'm not trying to sell anything. All my code is open source. I only come in here to try to offer help to people who are having problems with their javascript code. If I think something I have already done will help them with what they are doing, I point them in that direction.
                                I'm sure that's the case.  I'm not implying you have any ulterior motives, just answering the question "How can I do this with the YUI Animation library".  Exposing the callbacks and other animation properties is the best way to do this.  If people learn more about how javascript works along the way (using timers, scoping, etc.), that's a bonus.

                                Matt

                                Jack Slocum wrote:

                                > the message here is that it
                                > is a simple process to modify an Anim's attributes (and other
                                > properties) at runtime (without 3rd party extensions).

                                I agree 100%.

                                But when I look at this:

                                var test1 = new YAHOO.util.Anim('test1', 
                                 
                                 {
                                     width: { to: 150 }, height: { to: 150 },
                                    top: { to: 150 }, left: { to: 150 }
                                    }
                                );
                                 
                                test1.onComplete.subscribe(function() {
                                        test1.attributes = {opacity: {to: 0}};
                                        setTimeout( function() {test1.animate()}, 1000);
                                });

                                YAHOO.util.Event.on('test1', 'click', function(){
                                        test1.animate();
                                });

                                and compare it to this:

                                var test1 = new YAHOO.ext.Actor('test1', null, true);
                                test1.on('click', function(){
                                        test1.setBounds(150, 150, 150, 150, true);
                                        test1.pause(1);
                                        test1.hide(true);
                                        test1.play();
                                });

                                I see two things:
                                1) Because of the callbacks when doing multiple animations, the default way is more prone to programmer error. For example, the code you posted creates an infinite loop. 

                                2) I can look at my code and know exactly what is happening instantly. The code flows exactly like it executes. While your example is pretty easy to figure out, it does take a moment to follow the different paths. When you have alot of animations (say you are writing a game like Dave) or you need to animate a bunch of different elements along the same timeline, ! then the benefits of using my extensions are more readily apparent.

                                I'm not trying to sell anything. All my code is open source. I only come in here to try to offer help to people who are having problems with their javascript code. If I think something I have already done will help them with what they are doing, I point them in that direction.

                                 ---
                                Jack Slocum
                                Yahoo! UI - Beyond the Examples
                                http://www.jackslocum.com/yui


                              Your message has been successfully submitted and would be delivered to recipients shortly.