jQuery Effects and Queues

Question

I'm trying to manipulate an object using a jQuery effect chain. Some of the effects in the chain depend on the current position of the object. But it seems the entire effect chain is queued prior to execution, so any function calls to get current positioning return incorrect values.

Two alternatives to the standard chaining I'm using (.fadein().fadeOut().animate()) would be to use callbacks after the completion of each effect to start the next. Or I could look at using a jQuery queue.

Am I correct in assuming that if I code the callback, such as .fadeIn(500,startNextEffect) that the contents of startNextEffect will not be evaluated when the fadeIn effect is queued? And is there something easier I'm missing?

Thank-you, Chris

The `startNextEffect` function will be called when the animation concludes, so yes its contents won't be evaluated until then (except the pre-cached vars from an outer scope which will have the last value set, of course). — Fabrício Matté, Aug 29 '12 at 21:12

Barlas Apaydin · Answer 1 · 2012-08-29T21:55:15.723

0

You can overlap images with css position property, than use fadeIn() and fadeOut() effects:

Here is jsFiddle example.

jQuery:

$(document).ready(function() {
    $('img').click(function() {
        $('img').fadeOut(400);
        $(this).next().delay(100).fadeIn(600);
    });
});

css:

img { position:absolute; left:10px; top:10px; }

edited Aug 29 '12 at 21:55

answered Aug 29 '12 at 21:24

Barlas Apaydin

7,233
11
55
86

jQuery Effects and Queues

1 Answers1