title: Run function only after another function is complete
body: <p>I have been trauling the web to find an answer to this, but everything I find seems to fail.</p>
  
  <p>In a function I want to disable a href link. Once this function is complete (including animations) I want to re-enable the link.</p>
  
  <p>I currently have the following:</p>
  
  <pre><code>function prev() {
      $prevId = $('.active').prev('.slide-item').attr('id');
      if ($prevId) {
          $('#prev').bind('click', false);            
          var id = '#'+$prevId;
          $('#thumb-list li a.current').removeClass('current');
          var thumb = '#thumb-list li a'+id;
          $(thumb).addClass('current');
          $('.active').transition({ left: offCanvas }, 300, function() { $(this).hide(); }).removeClass('active');
          setTimeout(function() {
              $(id).addClass('active').css({ left: -pageWidth }).show().transition({ left: 0 }, 300).css("-webkit-transform", "translate3d(0px,0px,0px)"):
          }, 30); 
          prevFinished();
      } else {
          $('.active').css("-webkit-transform", "translate3d(0px,0px,0px)");
          id = '#'+$('.active').attr('id');
      }
      $prevId = $(id).prev('.slide-item').attr('id');
      $nextId = $(id).next('.slide-item').attr('id');
      prevNextCheck();
  }
  
  function prevFinished() {
      $('#prev').unbind('click', false);
  }
  </code></pre>
  
  <p>But it doesn't work at all.</p>
  
  <p>If anyone could point me in the right direction that would be great.</p>
  
  <p>P.S I tried using callbacks, but unless I am doing something terribly wrong it failed every time.</p>