Fade-in / fade-out effects for several buttons
I have no problem setting this up in html - it makes sense in this case.

&lt;div class="menu"&gt;
&lt;ul class="menu"&gt;
&lt;li class="home_button"&gt;home&lt;/li&gt;
&lt;li class="work_button"&gt;&lt;a href="#work" data-fadeOut="#cms,#contact"&gt;work&lt;/a&gt;&lt;/li&gt;
&lt;li class="cms_button"&gt;&lt;a href="#cms" data-fadeOut="#work,#contact"&gt;cms&lt;/a&gt;&lt;/li&gt;
&lt;li class="contact_button"&gt;&lt;a href="#contact" data-fadeOut="#cms,#work"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


Set a target on each one

$(function() {
    $('li a', '.menu').click(function(e) {
      e.preventDefault();
      var target = $($(this).attr('href'));
      $($(this).data('fadeOut')).fadeOut(function(){ 
        target.fadeIn();
      });
    })
    $('.panel').hide();
    $('.home_button').click(function(){
        $('.panel:visible').fadeOut();
    });
})


You get the nifty coincidental benefit here of this working ok even without javascript since &lt;a href="#id"&gt;&lt;/a&gt; also happens to be the the syntax for 'scroll-to element'

Also, you should not name functions with an uppercase capital. Because javascript has no native way of determining which functions are meant to be run in a functional style and which are meant to be used as constructors with the new keyword, it is a very well known convention to use upper case names only for functions which are meant to be invoked with the new keyword. Learn more about javascript capitalization conventions here.

Edit: Totally misread your code. I believe my rewrite now reflects what you're trying to do