CODEWITHSUNDEEP
jqueryhtmljquery-animate
Carl R
Carl R

Reputation: 8214

jQuery wait for animation by querying animation queue?

I know the official way to wait for an animation is a callback sent to the animation function. Is it still possible to somehow query the animation queue, performing a wait loop (with a watchdog) outside the animation call?

Example (and a concrete problem)

We are using jQuery lightbox 0.5 and have moved the close button and added some info content. The box renders correct except in IE8, where the bottom items are positioned too far up until the page is resized or a mouse over occurs.

It seems that IE needs to wait between animations in order to succeed properly. I would like to fix this problem without changing the flow of the code. Is it possible?

This is from jQuery lightbox:

/**
* Show the prepared image
*
*/
function _show_image() {
    $('#lightbox-loading').hide();
    $('#lightbox-image').fadeIn(function () {
        _show_image_data();
        _set_navigation();
    });
    _preload_neighbor_images();
};
/**
* Show the image information
*
*/
function _show_image_data() {
    $('#lightbox-container-image-data-box').slideDown('fast');

If I change it like this, it works fine in IE8:

/**
* Show the prepared image
*
*/
function _show_image() {
    $('#lightbox-loading').hide();
    $('#lightbox-image').fadeIn(function () {
        _show_image_data();
    });
    _preload_neighbor_images();
};
/**
* Show the image information
*
*/
function _show_image_data() {
    $('#lightbox-container-image-data-box').slideDown('fast', function () {
        _set_navigation();
    });

Can I wait for the animation queue for a certain element?

Pseudo code:

/**
* Show the prepared image
*
*/
function _show_image() {
    $('#lightbox-loading').hide();
    $('#lightbox-image').fadeIn(function () {
        _show_image_data();
        var timeout = 500;
        $('#lightbox-container-image-data-box').waitForAnimation(timeout);
        _set_navigation();
    });
    _preload_neighbor_images();
};
/**
* Show the image information
*
*/
function _show_image_data() {
    $('#lightbox-container-image-data-box').slideDown('fast');

Upvotes: 0

Views: 1106

Answers (1)

ori
ori

Reputation: 7847

You can queue your own function into the effects (fx) queue, and even delay them if you want. Just make sure you're applying it to the exact same element as lightbox.

$('#lightbox-image').delay(1000).queue(function(next) {
   // your code here

   if (next) next(); 
});

Upvotes: 2

Related Questions