Basically you want to call "callback();" when your function is
"finished". In the case of your function doing some animating,
"finished" happens when the last animation finishes, which is what I
had in my example. In your case, you have 2 conditions where the
function is "finished" right away, one if the element doesn't move,
and another if the element isn't visible. You just need to call
callback() when you're function is "finished".
Just add "else if($.isFunction(callback)) callback();" to your outer
if and "if($.isFunction(callback)) callback();" inside the end of your
inner if.
"callback" is probably a poor choice for a name. It would probably be
clearer if you rename "callback" to something like "finished" or
"next" or "doNext" or "nextEffect" or something like that.
--Erik
On 5/25/07, Gordon <[EMAIL PROTECTED]> wrote:
Though once again I've hit a bit of a snag. :) Here's the code I'm
using for moving my elems around, rewritten as an animation
callback.
$.fn.moveProducts = function (thisList, callback)
// Product list move animation
{
var last = this.size () - 1;
return this.each (function (thisElemNum)
{
elem = jQuery (this);
newXPos = thisList.colToXPos (thisList.ordToCol (thisElemNum));
newYPos = thisList.rowToYPos (thisList.ordToRow (thisElemNum));
// Only apply an animation if the element has moved
if ((parseInt (elem.css ('left'), 10) != newXPos) || (parseInt
(elem.css ('top'), 10) != newYPos))
{
// Just change the position of the element if it's not
visible, we
don't need fancy animation effects
if (elem.css ('display') == 'none')
{
elem.css ({
left : newXPos,
top : newYPos
});
}
else
{
elem.animate ({
left : newXPos,
top : newYPos
}, Math.floor (Math.random () * 500) + 501,
function ()
{
if(thisElemNum == last &&
$.isFunction(callback))
{
callback ();
}
});
}
}
});
}
As you can see there's a possibility that no animation will occur at
all in here, and if that happens then an animate callback will not be
triggered and the chain of subsequent animations is broken.
The following function fixes the broken chain function but introduces
problems of its own.
$.fn.moveProducts = function (thisList, callback)
// Product list move animation
{
var last = this.size () - 1;
return this.each (function (thisElemNum)
{
elem = jQuery (this);
newXPos = thisList.colToXPos (thisList.ordToCol (thisElemNum));
newYPos = thisList.rowToYPos (thisList.ordToRow (thisElemNum));
elem.animate ({
left : newXPos,
top : newYPos
}, Math.floor (Math.random () * 500) + 501, function ()
{
if(thisElemNum == last && $.isFunction(callback))
{
callback();
}
});
});
}
This is less optimal as effects are applied unconditionally, which
would probably impact performance, especially if dealing with a lot of
elements. Worse than that, if an element is invisible when the
animation effect is applied then it is instantly rendered visible.
The plan is to only reveal the invisible elements with a fade in after
the move effects have ended.
I'm so close now! All I need now is some way to make the next stage
in the queue occur regardless of whether my animation plugin actually
causes any animation to happen.
On May 25, 9:20 pm, Gordon <[EMAIL PROTECTED]> wrote:
> That's extremely impressive and exactly what I need, your work is
> tremendously appreciated. Be sure to keep us all updated on how you
> progress with this thing because I'm sure there's plenty of people out
> there who would find this plugin to be a lifesaver
>
> On May 25, 7:54 pm, "Erik Beeson" <[EMAIL PROTECTED]> wrote:
>
> > Check this out:http://erikandcolleen.com/erik/jquery/fxQueue/random.html
>
> > Only tested on FF. I think that's doing what you want. The plugin
> > doesn't have a concept of doing animations sequentially vs
> > simultaniously; it only does sequentially. But the plugin does make it
> > easy to use any animation function. So for the simultanious part, I
> > created a custom animation function (called randomAnimation) that just
> > randomly moves/resizes stuff. The only tricky bit it to make sure you
> > only call the callback function in randomAnimation when the last item
> > is finished animating. Check out the source to see how it's done.
>
> > I also fixed a few substantial flaws in the fxQueue plugin. Feedback
> > is always welome.
>
> > --Erik
>
> > On 5/25/07, Gordon <[EMAIL PROTECTED]> wrote:
>
> > > I just downloaded it and am experimenting, so far I'm really
> > > impressed. Thanks for the effort, it really is appreciated.
>
> > > I do have one question though, I'm not sure if this is possible or
> > > not, but I need to be able to animate a group of objects together, but
> > > with unique effects (they all need to move to different locations).
> > > This moving effect will be bookended with a fadeout effect beforehand
> > > for elements that are not included in the user's selection, and a fade
> > > in effect afterward for elements that were excluded the previous
> > > selection but which are to be reincluded this time around.
>
> > > I'll cut and paste what I put in the other thread for you because I
> > > think it gets across what I'm thinking a bit better.
>
> > > In reflection, I think what I need is a queue into which classes of
> > > animations can be inserted. All the animation events in a class get
> > > executed together, but each class in the queue is executed one after
> > > the other. Maybe something like this:
>
> > > animQueue.addClass ('hideClass');
> > > animQueue.addAnim ('hideClass', $('.toHide').fadeOut ('slow'));
> > > animQueue.addClass ('moveClass');
> > > $('.moveClass').each (function (){
> > > animQueue.addAnim ('moveClass', $(this).animate ({
> > > top: Math.floor (Math.random () * 1000),
> > > left: Math.floor (Math.random () * 1000)
> > > },(Math.floor (Math.random () * 1000) + 500) ));
> > > });
> > > animQueue.addClass ('showClass');
> > > animQueue.addAnim ('showClass', $('.toShow').fadeIn ('slow'));
>
> > > animQueue.execute ();
>
> > > Obviously the syntax is totally made up and possibly totally not
> > > appropiate for what I'm trying to describe, but I hope yo ucan get the
> > > gist of what I'm gatting at here. Is it possible to do this with your
> > > plugin? Because, if so, then you've come up with pretty much the
> > > perfect solution. :)
>
> > > On May 25, 4:08 pm, "Erik Beeson" <[EMAIL PROTECTED]> wrote:
> > > > Hello all,
>
> > > > In response to a thread yesterday, I put together a little framework
> > > > for effect queueing. My version yesterday, and subsequently Brandon's
> > > > version aswell, don't correctly deal with effects applied to multiple
> > > > elements, like when using classes instead of IDs. See here, and notice
> > > > how the later effects all bunch up and don't run
sequentially:http://erikandcolleen.com/erik/jquery/fxQueue/ba/test.html
>
> > > > This version deals with that correctly. Other features include:
> > > > * Multiple queues that can run simultaniously
> > > > * Pausing/resuming of queues
> > > > * Works with any effect (just requires the effect function to take an
> > > > "on effect finished" callback as its last parameter) like show, hide,
> > > > animate, Pulsate, Puff, Grow, etc
> > > > * Additional effects can be added to queues after they've been created
>
> > > > I've only tested it on FF1.5/Win and IE6 (I'll test OS X when I get
> > > > home later today), and for some reason one of the demo pages doesn't
> > > > work right on IE6.
>
> > > > Plugin src (with a little inline documentation!) and a couple of
> > > > examples can be had here:http://erikandcolleen.com/erik/jquery/fxQueue/
>
> > > > I mainly did this as an exercise for myself, so it won't hurt my
> > > > feelings if it turns out this isn't really very useful, or if it's
> > > > already been implemented in SVN or whatever.
>
> > > > Is this useful to anybody? Is it worth polishing up a little more?
>
> > > > --Erik
