Question

I have an onclick that runs two functions, I want the first one to run and finish, and on finishing start the next one. I have it setup like this right now and they seem to run at the same time:

$("#animate_1").click(function() {
update_1_close();
welcome_open();
});

these are the two functions, I don’t want to combine them, I have several of these and combining them would end up being very complicated

function update_1_close() {
$("#update_1").animate({
    "right": "175px",
    "width": "160px"
}, 450);
$("#update_1_caption").animate({
    "bottom": "0px"
}, 450);
$("#update_1_img").animate({
    "height": "107px",
    "width": "160px"
}, 450);
}

function welcome_open() {
$("#welcome_back_1").animate({
    "top": "345px"
}, 450);
$("#welcome_header_1").animate({
    "top": "35px",
    "left": "20px"
}, 450);
$("#welcome").animate({
    "height": "270px"
}, 450)
$("#stick_figures").animate({
    "top": "215px"
}, 450);
$("#update_1").animate({
    "top": "465px",
    "right": "175px"
}, 450);
$("#update_2").animate({
    "top": "465px"
}, 450);
$("#events").animate({
    "top": "645px"
}, 450);
$("#directions").animate({
    "top": "645px"
}, 450);
}

Answer 1

They can’t run at the same time — but, they might run one right after the other without the browser having a chance to refresh between them.

I have no idea what the two functions do, but you might want something more like this:

$("#animate_1").click(function() {
    update_1_close();
    window.setTimeout(welcome_open, 1000);
});

That will run update_1_close and then, one second later, run welcome_open