views:

152

answers:

1

I am trying to convert a Prototype slide-show plugin to jQuery. The animation function is fairly simple an intuitive: fade-out visible slide, fade-in next slide, both animations start and stop at the same time. Here is the Prototype code which I have yet to fully understand:

fadeInOut: function (a, b) {
    new Effect.Parallel(
        [
            new Effect.Fade(b, {sync: true}),
            new Effect.Appear(a, {sync: true})
        ], {
            duration: 1
        }
    );
}

I've written this jQuery equivalent:

var anim = function (a, b) {
    // m_Locked = true
    a.fadeOut(1000);
    b.fadeIn(1000);
    // m_Locked = false
};

I am wondering what does Effect.Parallel do and if there is a jQuery equivalent. I also need to set and clear a locked flag which i'll use to disable buttons while the animation is running... this does not seem to work.

A: 

Yes, you're interested in jQuery.queue().

Every element can have one to many queues of functions attached to it by jQuery. In most applications, only one queue (called fx) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. The typical example of this is calling multiple animation methods on an element. For example:

http://api.jquery.com/queue/

Tate Johnson
Hmm, how can I add an animation to each of the two elements and put them together inside one queue?
Salman A