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.

The files in question:

1. http://willphillips.org/files/test/
2. http://willphillips.org/files/test/temp-style.css
3. http://willphillips.org/files/test/scripts/jquery.js
4. http://willphillips.org/files/test/scripts/jquery.ui.js
5. http://willphillips.org/files/test/s...wp-switcher.js

The problem:

Notice the links in the masthead (Work Play) - when you click them from the first pane (Hello...), everything loads and dissapears just fine.

However, when you click on these links from the other two panes, the dissapearing pane gets pushed down below the masthead for a second or two (by virtue of the new pane's display attribute / class swapping) before disapearing. 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!

    $(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")
            }); 
    });

In order to fade from one to another, both will need to be absolutely positioned in the same place. Otherwise, the natural order of the CSS rules will take over as each item is slowly faded in then hidden, and visa versa.