Moving Elements with jQuery

[Pawn]

I've written an extremely minimal landing page that animates the position of text links within a paragraph to form a simple navigation bar. You can see it at brickmedialab.com.

 

Unfortunately, for everyone not running Firefox that page will look horrible. Because of my inexperience with jQuery, I absolutely positioned my text links so they could be easily moved with a click(). Because browsers render text so differently, this results in some very broken text positioning in anything but Firefox.

 

Further, text-size is animated as part of the transition, which again looks great in FF, but terrible in WebKit browsers and (I assume) IE.

 

Here's what's going on at the moment:

 

$(function() {
$('a').attr('onclick', 'return false').attr('href', '#');
$('a').click(function() {
	var go = $(this).attr('id');
	$(this).css('color', '#404040');
	$(this).blur();
	$('p, h1').fadeTo(1200, '0', function() {
		$('#work').animate({
			bottom: '540px',
			left: '0px',
			fontSize: '1.5em',
			fontStyle: 'normal'
		}, 1400);
		$('#about').animate({
			bottom: '540px',
			left: '20px',
			fontSize: '1.5em',
			fontStyle: 'normal'
		}, 1400);
		$('#hello').animate({
			bottom: '540px',
			left: '40px',
			fontSize: '1.5em',
			fontStyle: 'normal'
		}, 1400, function() {
			window.location = go;
		});
		$('h1').fadeTo('slow', '0', function() {
		})
	});
});
});

 

I'd really appreciate any thoughts on resolving these issues. When it comes to Javascript, I'm totally at sea.

[.josh]

tbh if it were me I'd make that splash page and animation in flash.