Closer investigation seems to reveal that the first time an fxqueue is
invoked the animations placed in the queue all happen concurrantly as
if they were not queued up. For some reason this doesn't happen on
subsequent invokations and all the animations queue up as they
should. I hadn't noticed this at first because I had deliberately fed
a large number of elements into the test code for stress testing and
the animation tended to be choppy under these curcumstances anyway.
Dropping to a smaller number of elements more typical of what would be
expected in everyday use revealed the problem.
On Jul 6, 10:47 am, Gordon <[EMAIL PROTECTED]> wrote:
> In the application I am developing I have been using Erik's excelent
> effects queueing plugin to que classes of animations up one after
> another. My code for setting up the effects queueing was as follows:
>
> {
> var animList = new Array;
> var thisQueue = null;
> // Get elements to show and hide
> var elemsToMove = $('.move');
> var elemsToHide = $('.hide');
> var elemsToShow = $('.show');
>
> // Hide all shown elements that are marked as unselected
> var thisQueue = $.fxQueue.start ({
> selector : elemsToHide,
> effect : self.hide,
> params : ['slow'],
>
> });
>
> // Move all selected elements to new locations
> $.fxQueue.add (thisQueue, {
> selector : elemsToMove,
> effect : 'moveProducts',
> params : ['slow'],
> });
>
> // Show all hidden elements that are not marked as unselected
> $.fxQueue.add (thisQueue, {
> selector : elemsToShow,
> effect : self.show,
> params : ['slow'],
> });
>
> };
>
> This worked okay, but then an issue arose where if users operated the
> form controls while the animations were playing then weird stuff would
> happen. I thought I'd just disable the form when the user starts an
> animation and reenable it when the animation ends. I had to rewrite
> my function a little to make sure that the last item in the queue and
> only the last item reenabled the form so I rewrite it like this (I'm
> using alerts to stand in for the form enable statement as they make
> the problem more visible)
>
> {
> var animList = new Array;
> var thisQueue = null;
>
> // Build animation action list
> if (elemsToHide.length > 0)
> animList.push ({
> selector : elemsToHide,
> effect : self.hide,
> params : [self.hideSpeed]
> });
>
> if (elemsToMove.length > 0)
> animList.push ({
> selector : elemsToMove,
> effect : 'moveProducts',
> params : [self.moveSpeed]
> });
>
> if (elemsToShow.length > 0)
> animList.push ({
> selector : elemsToShow,
> effect : self.show,
> params : [self.showSpeed]
> });
>
> if (animList.length > 0)
> {
> // Tag the final item in the queue with the done callback
> animList [animList.length - 1].callback = function (){alert
> ('done');};
> animList [animList.length - 1].callbackOnce = true;
> // Create effects queue
> while (animList.length > 0)
> {
> thisQueue?
> $.fxQueue.add (thisQueue, animList.shift ()):
> thisQueue = $.fxQueue.start (animList.shift
> ());
> }
> }
> else
> alert ('Nothing to do');
>
> };
>
> I found this causes a problem in that the callback function that I
> thought would only be triggered at the very end of the sequence got
> triggered at the end of every step in the sequence. This would lead
> to the form being reenabled prematurely.
>
> I tried the following change:
>
> {
> var animList = new Array;
> var thisQueue = null;
>
> // Build animation action list
> if (elemsToHide.length > 0)
> animList.push ({
> selector : elemsToHide,
> effect : self.hide,
> params : [self.hideSpeed],
> callback : function (){},
> callbackOnce : true
> });
>
> if (elemsToMove.length > 0)
> animList.push ({
> selector : elemsToMove,
> effect : 'moveProducts',
> params : [self.moveSpeed],
> callback : function (){},
> callbackOnce : true
> });
>
> if (elemsToShow.length > 0)
> animList.push ({
> selector : elemsToShow,
> effect : self.show,
> params : [self.showSpeed],
> callback : function (){},
> callbackOnce : true
> });
>
> if (animList.length > 0)
> {
> // Tag the final item in the queue with the done callback
> animList [animList.length - 1].callback = function (){alert
> ('done');};
> // Create effects queue
> while (animList.length > 0)
> {
> thisQueue?
> $.fxQueue.add (thisQueue, animList.shift ()):
> thisQueue = $.fxQueue.start (animList.shift
> ());
> }
> }
> else
> alert ('Nothing to do');
>
> };
>
> This nearly worked. The first time I called this function the result
> was that the alert would appear at the end of every point of the
> sequence like in my earlier attempt, but on subsequent calls the alert
> would only appear at the end of the sequence as I wanted to.
>
> I tried replacing the empty functions with alert ('a'), alert ('b')
> and alert ('c') for each respective step in the sequence. I found
> that on the first run through I'd get 'done' alerts for all steps in
> the sequence, but for subsequent run throughs I'd get 'a', 'b', 'done'
> as I expected and wanted to happen.
>
> Does anyone with experience with the plugin I'm using have any insight
> into what's going on here?
