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

Re: chaining a series of animations

Expand Messages
  • kedsoft
    Many thanks for that - just what I needed to get me further down the road! Why shouldn t I use Array() though? Also you need to var the animDn variable as
    Message 1 of 3 , Jun 28, 2008
    • 0 Attachment
      Many thanks for that - just what I needed to get me further down the road!

      Why shouldn't I use Array() though?

      Also you need to var the animDn variable as well.

      Your help is really appreciated - once again many thanks


      --- In ydn-javascript@yahoogroups.com, "Matt Hackett" <richtaur@...>
      wrote:
      >
      > Hi,
      >
      > First, don't use new Array(), use the array literal []. It looks like
      > you want the animations to fire only on the mouseover event? Here's a
      > way to do that:
      >
      > function mouseOverMotion(/* element and/or motion values etc */) {
      >
      > var animUp = new YAHOO.util.Motion(/* whatever for up */),
      > animDn = new YAHOO.util.Motion(/* whatever for down */);
      >
      > // No reason you can't subscribe right here
      > animUp.onComplete.subscribe(function() {
      > animDn.animate();
      > });
      >
      > YAHOO.util.Event.addListener(el, 'mouseover', function() {
      > animUp.animate();
      > });
      >
      > };
      >
      > So your new code would look something like:
      >
      > for (var i = 0; i < blocks.length; i++) {
      > mouseOverMotion(blocks[i]/* animation controls here, etc */);
      > }
      >
      > I don't have a way to test this reliably without the blocks array and
      > whatever you wanted to happen, but this should work fine.
      >
      > Hope that helps,
      > -Matt
      > http://scriptnode.com/
      >
      > --- In ydn-javascript@yahoogroups.com, "kedsoft" <john@> wrote:
      > >
      > > I'm trying to chain together a series of animations in a loop:
      > >
      > > var animsUp = new Array();
      > > var animsDown = new Array();
      > > for (var i=0; i<blocks.length; i++)
      > > {
      > > animsUp[i] = new YAHOO.util.Motion(
      > > blocks[i], {points: {to:[+300+i*100,100]} }, .25);
      > > animsDown[i] = new YAHOO.util.Motion(
      > > blocks[i], {points: {to:[+300+i*100,200]} }, .5,
      > > YAHOO.util.Easing.bounceOut);
      > > YAHOO.util.Event.addListener(blocks[i], 'mouseover',
      > > function(){
      > > animsUp[i].onComplete.subscribe(function() {
      > > animsDown[i].animate(); });
      > > animsUp[i].animate();
      > > });
      > > }
      > >
      > > The problem is that when the mouseover event occurs 'i' is no longer
      > > the correct subscript value (obviously!) but my limited javascript
      > > knowledge means I'm not sure how to get round this.
      > >
      > > Any help would be very useful as for me this is the key to chaining
      > > together many animations.
      > >
      > > Thanks
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.