Question

So my issue is pretty straight forward, since there is seemingly no callback for after a .css is executed, what options do I have for making performing something after a task is done?

I’m creating a simple lightbox, and I need to wait for the center align to finish…

$("#img_lightbox").css("top", top);

So when that completes, I then need to fade in the whole thing, but since there is no callback option (to the best of my knowledge) it will occasionally start fading in before the alignment finishes… how can this prevented?

Any help is appreciated, thank you.

Answer 1

Anything being chained with your jQuery object will execute after the function before it. The easiest way to accomplish what you are asking is with Plugins.

jQuery.fn.myPlugin = function () {
    //code to execute
    return this;
}
$("#img_lightbox").css("top", top).myPlugin();

You could even write a plugin to execute a custom function, so you do not need to create plugins for every function you might happen to need to run:

jQuery.fn.myCallback= function (callback) {
    this.each(function () {
        callback.call($(this));
    });
    return this;
}
$("#img_lightbox").css("top", top).myCallback(function () {
    // some code to run where this = $("#img_lightbox")
});

But incase I am still misunderstanding, you may be wanting a callback for your fade function: (otherwise please clarify more)

$("#img_lightbox").fadeIn('slow', function () {
    $(this).css("top", top)
});