The function of this code is to show/hide divs by way of fadeIn/fadeOut, starting with an empty div (home) and fading in one of the other divs (work,cms,contact,) on click, then fading out the last div and fading in the next on click, and then fading out any div and fading in 'panel' (an empty div) when you click on home.<script type='text/javascript'> $(function(){      $('.panel').hide();      $('.work_button').click(function(){            $('#cms,#contact').fadeOut(function(){            $('#work').fadeIn();            });      });      $('.cms_button').click(function(){            $('#work,#contact').fadeOut(function(){                  $('#cms').fadeIn();            });      });      $('.contact_button').click(function(){            $('#cms,#work').fadeOut(function(){                  $('#contact').fadeIn();            });      });      $('.home_button').click(function(){            $('.panel:visible').fadeOut();      });});</script><div class=menu><ul class=menu><li class=home_button>home</li><li class=work_button>work</li><li class=cms_button>cms</a></li><li class=contact_button>contact</a></li></ul></div><div class=panel id=work><p>...</p></div><div class=panel id=cms><p>...</p></div><div class=panel id=contact><p>...</p></div>
Fade-in / fade-out effects for several buttons
javascript;jquery;animation
I have no problem setting this up in html - it makes sense in this case.<div class=menu><ul class=menu><li class=home_button>home</li><li class=work_button><a href=#work data-fadeOut=#cms,#contact>work</a></li><li class=cms_button><a href=#cms data-fadeOut=#work,#contact>cms</a></li><li class=contact_button><a href=#contact data-fadeOut=#cms,#work>contact</a></li></ul></div>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 <a href=#id></a> 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