I'm using Jquery to execute a series of resizing animations onclick. The behavior works as expected in Firefox and IE8, but fails in Safari; on one page, the initial click fails to stretch the content area to the appropriate length but subsequent clicks are correct. On the second page the correct end length is never calculated and the content area remains too short.

I tried switching from $(document).load(function() to $(window).load(function(); this made no difference. Neither did using the Safari-specific patch for $(document).load(function() :

Code JavaScript:
if (jQuery.browser.safari && document.readyState != "complete") {
setTimeout( arguments.callee, 100 );
return;
 }

The script in question is below. This is a sample of the simpler of the two scripts I'm using; I hope the solution for this can be applied on the second case as well.

Code JavaScript:
<script>
		$(window).load(function() {
								if ($.browser.webkit) {
    $('#content').outerWidth(639);
  }
								moveIt = $('#content').outerWidth();
							$('#content').delegate('a', 'click', function(e) {
 
								var currl = $('#content').offset();
 
								if(currl.left > 300){
									$('#content').animate({'maxWidth': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');						
								}
								else{
									$('#content').animate({'maxWidth': '-=' + moveIt / 2 + 'px', 'left' : '43%'}, 400);
								}
							e.preventDefault(); //Hyperlink won't load page link.
							});
		});
 
				<!--calls jquery cycle after smd_ajax pulls in the content-->				   
		function ajaxcycle(){ 
 
			$('#full-wrap').cycle();
 
		};
 
 
		</script>

And here's the live site. To see the correct behavior, view the site in IE8 or Firefox.