Question

I have a google maps app that will resize the map div if its too big, the problem I am having is that I am trying to use Jquerys animate and its returning the function before it’s finished and I have to trigger to the google maps that it was resized.

Therefore the map is zoomed in and bounds set before its triggered, thus offseting it. and only correctly working when its triggered a second time.

function doResize() {
    if ($("#map_div").width() > 600) {
        $("#stores").hide(0, function(){
            $("#map_div").animate({width: '500px'}, function(){
                google.maps.event.trigger(G_MAP, 'resize');
                $("#stores").fadeIn(1000);
            });
        });
    }
}

I cannot put the rest of the code in the callback for two main reasons, one is that its a big function and its used in two places. Also the width is only over 600 once.

Notice how when you first click newyork its offset and not centered, then click a different state and click back on new york.

Edit:

Since I cannot make the animation synchronous and doing:

while($("#map_div").width() > 500) {
    $("#map_div").width($("#map_div").width() - 1)
}

Is not smooth at all, I’ve decided to ditch the animation. Forcing Jquery to have to run asynchronous is really a downfall sometimes. Especially when javascript itself is single threaded, you’d think they would have options for waiting until its finished.

Answer 1

I cannot put the rest of the code in the callback for two main reasons, one is that its a big function and its used in two places. Also the width is only over 600 once.

And yet, that’s exactly what you must do — or rather, you don’t want to move the code there, just add a call to it from the callback. You can’t hold up the return of a function waiting for the animation to complete, there’s just no way to do that in JavaScript. The various ways in which you might try to do that (busy-waiting, etc.) don’t work. It doesn’t matter that it only happens once, you still need to use a callback.