Topic: jQuery newbie Needs Some Help!

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:


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")
			}); 
	});    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Re: jQuery newbie Needs Some Help!

Hi Will - the trick is going to be fading out the elements before fading the other ones in. Do you know how to use callback functions in jquery? Look at function that's called as a parameter of the fadeOut effect. It's basically a "run this function when you complete the other" function.

		$('a#link-work-play').click(function() {  
                        $('#tab-work').fadeOut("slow", function() {
                                $('#tab-play').fadeIn("slow").removeClass("ui-tabs-hide");
                        }).addClass("ui-tabs-hide");
		});

Hope that helps!

Web Developer - AM Design | I specialize in XHTML, CSS, PHP and jQuery