[jQuery] Re: Effect Queueing Plugin
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
[jQuery] Re: Effect Queueing Plugin
Nice. I believe it is worth polishing up! Keep at it. -- Brandon Aaron On 5/25/07, 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
[jQuery] Re: Effect Queueing Plugin
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
[jQuery] Re: Effect Queueing Plugin
Looks great in Safari 2!
On 5/25/07, 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
--
Aaron Heimlich
Web Developer
[EMAIL PROTECTED]
http://aheimlich.freepgs.com
[jQuery] Re: Effect Queueing Plugin
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
[jQuery] Re: Effect Queueing Plugin
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
