title: Hide a div on click with slow sliding to side animation
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="two" /&gt;
  &lt;form &gt;
  &lt;input type="text"/&gt;
  &lt;input type="text"/&gt;
  &lt;input type="button" id="twobtn" value="Pay" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="one" /&gt;
  &lt;form &gt;
  &lt;input type="text"/&gt;
  &lt;input type="text"/&gt;
  &lt;input type="button" id="onebtn" value="Next"/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above html has two divs each having a form.When the page is loaded,only div id="one" should be shown.</p>
  
  <p>After filling "one" , Next is clicked and the this form slides and fades away and div id="two" appears sliding.</p>
  
  <p>i tried </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  $('#two').hide();
  
  $('#onebtn').on('click',function(){
      $('#one').hide('slow')
      $('#two').show('slow');
  });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and this two divs are arranged one above the other.Can sliding transition from side can be made?Any help on how to achieve this?</p>
  
  <p>I have a fiddle which is working <a href="http://jsfiddle.net/e6en9/" rel="nofollow">http://jsfiddle.net/e6en9/</a>  BUT WHEN I DO TRY IN MY WEBSITE,THE #TWO IS HIDDEN WHEN IT LOADS.WHEN I CLICK ON #ONEBTN IT HIDES THE FORM AND SHOW THE #TWO THEN AGAIN #TWO IS HIDDEN AND BACK TO HOW IT WAS WHEN LOADED.</p>
  
  <p>Can someone help me with the jquery? A better jquery for this? And how to add slide from side animation?
  Im new to jquery,this I have done reading the jquery doc..But cant make it perfect.Please help needed</p>