Why is this background position animation jumping instead of easing?

Why is this background position animation jumping instead of easing?

Can't figure out why this background animation is jumping. Code and link are below:


  2. jQuery(document).ready(function(){
  4. jQuery('.program_info_2').hover(
  5. function() 
  6. {  
  7. jQuery(this).animate({height: '242px'}, {duration:300});
  8. jQuery('.program_info').stop().animate({height: '183px'}, {duration:300});
  9. jQuery('#masthead3').stop().animate({backgroundPosition: '0 -143px'}, {duration:300});
  10. jQuery('#masthead1').stop().animate({backgroundPosition: '0 -143px'}, {duration:300});
  12. },
  13. function() 
  14. {  
  15. jQuery(this).animate({height: '96px'}, {duration:1});
  16. jQuery('.program_info').stop().animate({height: '327px'}, {duration:300});
  17. jQuery('#masthead3').stop().animate({backgroundPosition: '0 0'}, {duration:300});
  18. jQuery('#masthead1').stop().animate({backgroundPosition: '0 0'}, {duration:300});
  19. }
  20. );
  22. });