Please help me simplify this jQuery code
<p>I know that a good portion of this jQuery code is unnecessary, especially in the repetition of the <code>fadeOut</code> and <code>fadeIn</code> events.</p>

<pre><code>   &lt;script type='text/javascript'&gt;
         $(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();
              });
        });
    &lt;/script&gt;

&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;work&lt;/li&gt;
&lt;li class="cms_button"&gt;cms&lt;/a&gt;&lt;/li&gt;
&lt;li class="contact_button"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

    &lt;div class="panel" id="work"&gt;
        &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="panel" id="cms"&gt;
        &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="panel" id="contact"&gt;
        &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;
</code></pre>
