title: Slide div horizontally with easing
body: <p>I am looking to achieve a hide/show div where on mouse enter the div is shown but in a sliding left to right manner with easing.</p>
  
  <p>Also i need the page to focus on the new div that just slided out / made visible.</p>
  
  <p>Here is my script.</p>
  
  <p>Any ideas on what i need to add?</p>
  
  <pre><code>&lt;script&gt;$("#box0").mouseenter(function () {
      $("#lSection2").show('slide').delay(5000); 
      $("#boxContent0").slideDown(3000);
      $("#boxContent0").focus();
  
  });
  
  $('#boxContent0').mouseleave(function() {
      $("#boxContent0").fadeOut(1000);     
      $("#lSection2").fadeOut(1000);
  });&lt;/script&gt;
  
   &lt;div class="AdBox" id="box0"&gt;mouse over or click to view details&lt;/div&gt;
  
  
  
   &lt;div id="lSection2" style="display:none;"&gt;&lt;div id="boxContent0"
   style="display:none;"  class="boxContent"&gt;
       &lt;div align="left" style=""&gt;Win Big&lt;br /&gt;
   - Ipad&lt;br /&gt;
   - Holiday&lt;br /&gt;
   - 1 Year Spa Treatments&lt;/div&gt;
       &lt;div&gt;&lt;/div&gt;
  </code></pre>