Functions and callbacks

Functions and callbacks

I have worked out what is wrong with my code - I think I need to be using functions and call backs but I haven't ever done this without using the built in call backs.

I have annotated the code below with the parts that I want to fire in order only after the process before that has happened.

Hope this makes sense. Any help would be much appreciated.
  1. function fadeBackground(image) {
  2.    
  3.         ///***** WANT TO HAPPEN FIRST**************
  4.    
  5.     var border;   
  6.    
  7.    
  8.    
  9.     $.cacheImage(image, {
  10.      load : function (e) {
  11.      $('#wrapper_2 img').attr('src', image);
  12.     border = ($(window).height() - $('#wrapper_2 img').outerHeight())/2;
  13.            
  14.      },
  15.      
  16.     });
  17.    
  18.     ///***** WANT TO HAPPEN SECOND ONLY AFTER FIRST IS COMPLETED**************
  19.    
  20.     $('#wrapper_2 img').css("margin-top", border);
  21.     $('#wrapper_2').css('background-color', $backgroundcolour);   
  22.        
  23.        
  24.     ///***** WANT TO HAPPEN THIRD ONLY AFTER SECOND IS COMPLETED**************
  25.         $('#wrapper_2').fadeIn('slow', function() {
  26.                 $('#wrapper_1').css( 'background-color', $backgroundcolour);
  27.                 $('#wrapper_1 img').attr('src', image);
  28.                 $('#wrapper_2').css('display', 'none');
  29.                 $('#wrapper_1').css('display', 'block');
  30.                 $('#wrapper_1 img').css("margin-top", border);
  31.         });
  32.                                                     
  33. }