title: smoother and nicer animation on slider
body: <p>i have made script that makes my page bit better but it has terrible animated script and i want to know how to make it better
  best would be slide to side and opacity change to 0 </p>
  
  <p>I don't know much about JS this took me week to make it work :S</p>
  
  <p>HTML: </p>
  
  <pre><code>        &lt;div id="menu-content"&gt;
          &lt;a id="5home" class="show" href="#"&gt;Home&lt;/a&gt;
          &lt;a id="5contact" class="show" href="#"&gt;Contact&lt;/a&gt;
          &lt;a id="5about_us" class="show" href="#"&gt;About us&lt;/a&gt;
          &lt;a id="5a_team" class="show" href="#"&gt;A-Team&lt;/a&gt;
          &lt;a id="5connect" class="show" href="#"&gt;Connect&lt;/a&gt;
          &lt;a id="5donate" class="show" href="#"&gt;Donate&lt;/a&gt;
      &lt;/div&gt;
  
          &lt;div class="cont" id="home" style="Display :visible ;"&gt;
          &lt;/div&gt;
  
          &lt;div class="cont" id="contact" style="Display :none ;"&gt;
                      &lt;/div&gt;
  
          &lt;div class="cont" id="about_us" style="Display :none ;"&gt;
          &lt;/div&gt;  
  
          &lt;div class="cont" id="a_team" style="Display :none ;"&gt;
          &lt;/div&gt;
  
          &lt;div class="cont" id="connect" style="Display :none ;"&gt;
          &lt;/div&gt;  
  
          &lt;div class="cont" id="donate" style="Display :none ;"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$(document).ready(function(){
      $('.show').click(function menu() {
          var id = '#';
          id += this.id;
          id = id.replace(/5/, '');
          if ($(id).is(':visible')) {
          }
          else {
              var ido = '#';
              ido += $('.cont:visible').attr('id');
              $(ido).animate({
                  opacity: 'toggle',
              }, 350);
              $(id).animate({
                  opacity: 'toggle',
              }, 350);
          }
      });
  });
  </code></pre>