Question

I have two jQuery functions. The first one below I want to run first, than when that function has finished, run the other one. Normally I’d add a function to the first bit of code, but not sure how I’d do that with this block or if it’s the correct way.

So in short, I want this code to run…

$('#setupPanel').modal({
        backdrop: "static",
        keyboard: false
});

AFTER this function has finished executing…

$('html, body').animate({
        scrollTop: $("#header_wrap").offset().top
}, 600);

EDIT:
Here’s the entire function…

$(setUp).click(function () {
    $('html, body').animate({
        scrollTop: $("#header_wrap").offset().top
    }, 600);
    $('#setupPanel').modal({
        backdrop: "static",
        keyboard: false
    });
});

Answer 1

You can try promise() method:

$(setUp).click(function () {
    $('#setupPanel').modal({
        backdrop: "static",
        keyboard: false
    }).promise().done(function() {
        $('html, body').animate({
            scrollTop: $("#header_wrap").offset().top
        }, 600);    
      });
});

Update:

You can also use .animate() method’s callback function:

$(setUp).click(function () {
        $('html, body').animate({
            scrollTop: $("#header_wrap").offset().top
        }, 600, function() {
          $('#setupPanel').modal({
              backdrop: "static",
              keyboard: false
          })
      }});
});