Great, it's working perfectly now, thanks for all the help
On May 26, 12:10 am, "Erik Beeson" <[EMAIL PROTECTED]> wrote:
> 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
