Jquery: execute a function when another is finished

Question

I need your help. I want to animate with jquery a panel. It must get open on click on buttons (function OPEN_PANEL) and load different php pages on it, then close when click on a div with a class "close" (function CLOSE_PANEL). This works fine, the problem is when I want to open a different panel when one is already open. It should close the open one and after that open the last I selected, but it looks like it executes both functions at the same time. How can I solve the problem?

This is the javascript code:

var panel_is_open=0;
var last_open_panel="";

function animation_open_panel(id){
    window_height=$(window).height()*0.85;
    $("#"+id+"_button").css({'background-color':'rgba(255,255,255,0.8)', 'box-shadow':'0px 5px 10px #39C', '-webkit-box-shadow':'0px 5px 10px #39C'});
    $("#main_panel").show().animate({ height: window_height+"px" }, 1500)
    .animate({ width: "90%" },1000);
    $("#main_panel").queue(function(){
        $(".close").show();
        $("#page_container").hide().load(id+"/"+id+".php",function(){
            $("#page_container").fadeIn(1000);
        });
        $(this).dequeue();
    });
}

function animation_close_panel(){
    $("#page_container").fadeOut(1000, function(){
        $("#main_panel").animate({ width: "637px" }, 1000)
        .animate({ height:"0px" }, 1500, function(){
            $(".close").hide();
            $("#"+last_open_panel+"_button").css({'background-color':'', 'box-shadow':'', '-webkit-box-shadow':''});
        });
    });
}

function close_panel(){
    if(panel_is_open==1){
        animation_close_panel();
        panel_is_open=0;
    }
}

function open_panel(id){
    if(panel_is_open==0){
        animation_open_panel(id);
        last_open_panel=id;
    }

    else if(panel_is_open==1){
        if(id!=last_open_panel){
            close_panel();
            open_panel(id);
        }
    }

    panel_is_open=1;
}

Thank you very much in advance for your help.

Thank you very much for your suggestions, but I couldn't solve the problem with both solutions. I am mistaking something but I can't understand what.

This is my code:

function close_panel(){
    if(panel_is_open==1){
        // animations here
        panel_is_open=0;
    }
}

function close_open_panel(next){
    close_panel();
    next();
}

function open_panel(id){
    if(panel_is_open==0){
        // animations here
        last_open_panel=id;
        panel_is_open=1;
    }

    else if(panel_is_open==1){
        if(id!=last_open_panel){
            close_open_panel(function(){
                open_pannel(id);
            });
        }
    }
}

Any idea where I am mistaking? Thanks.

score 1 · Answer 1 · answered Sep 18 '11 at 10:53

If you're after jQuery specific solution then look up Deferred Object:

jQuery.Deferred(), introduced in version 1.5, is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

score 0 · Accepted Answer · edited May 23 '17 at 12:03

You can use callbacks in the functions, e.g.

function open(callback)
{
   // do stuff
   callback(some_value);
}

Then you can use it by doing this:

open(function(value)
{
    // anything here will be executed
    // after the function has finished
});

The value in the callback() and function(value) is optional, you can return a straightforward function instead of passing a value that is to be called back, however, it's useful for some certain functions that requires asynchronous callbacks.

More information about callback functions:

Getting a better understanding of callback functions in JavaScript

Jquery: execute a function when another is finished

2 Answers2