Hey guys,

I'm learning jQuery/JavaScript for the first time and putting together an online calling card in the style of Tim Van Damme as my sandbox for it. I'm almost there, but am having a problem I can't exactly pinpoint.

I'd post a link to my site and the files in question, but the forums here won't let me until I get to 10 posts, so I'll just post the jquery .js in question... hope that doesn't hamstring me too much.

The problem:

I have links in divs within a masthead container div - when you click them from the first pane that is loaded (the other two have an addition class that sets display:hide), everything loads and disappears just fine.

However, when you click on these links from the other two panes, the disappearing pane gets pushed down below the masthead for a second or two (by virtue of the new pane's display attribute / class swapping) before disappearing. This pushes the whole footer/contact area down.

Obviously, that's not gonna work.


The code:

Here's a copy of my wp-switcher.js code. To all your jQuery and JavaScript pros, it's probably really nasty looking. I'll be the first to admit that I frankensteined the bits and pieces together and started hacking away until things miraculously started working.

Because I'm a noob, I'm not even sure why what I did was wrong, much less how to remedy it!

Code:
	$(document).ready(function() {  
	
		//Main Hello Tab Controls
		$('a#link-hello-work').click(function() {  
        $('#tab-hello').fadeOut("1000").addClass("ui-tabs-hide")
			$('#tab-work').fadeIn("1500").removeClass("ui-tabs-hide")
			}); 
		
		$('a#link-hello-play').click(function() {  
        $('#tab-hello').fadeOut("slow").addClass("ui-tabs-hide")
			$('#tab-play').fadeIn("slow").removeClass("ui-tabs-hide")
			}); 

		//Work Tab Controls
		$('a#link-work-hello').click(function() {  
        $('#tab-work').fadeOut("slow").addClass("ui-tabs-hide")
			$('#tab-hello').fadeIn("slow").removeClass("ui-tabs-hide")
			}); 
		
		$('a#link-work-play').click(function() {  
        $('#tab-work').fadeOut("slow").addClass("ui-tabs-hide")
			$('#tab-play').fadeIn("slow").removeClass("ui-tabs-hide")
			}); 
			
		//Play Tab Controls
		$('a#link-play-hello').click(function() {  
        $('#tab-play').fadeOut("slow").addClass("ui-tabs-hide")
			$('#tab-hello').fadeIn("slow").removeClass("ui-tabs-hide")
			}); 
		
		$('a#link-play-work').click(function() {  
        $('#tab-play').fadeOut("slow").addClass("ui-tabs-hide")
			$('#tab-work').fadeIn("slow").removeClass("ui-tabs-hide")
			}); 
	});