title: How can I make a div horizontally slide in?
body: <p>I currently have a div appearing on hover, but it just pops up rather than sliding in:</p>
  <pre><code>#home-heroImage{
    padding: 0px;
    margin: 0px auto;
    width:980px;
    height: 525px;
    position: relative;
    z-index: 1;
    background-color: #fcba2e;
  }
  
  #home-hero-pop{
    background-color: #ffffff;
    opacity:0.8;
    -ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=80)&quot;;
    filter: alpha(opacity=80);
    font: 16px Helvetica,Arial,sans-serif;
    font-weight: bold;
    color: #6d6e70;
    text-align: left;
    padding: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 505px;
    width: 460px;
    z-index: 2;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/Adk8r/4/" rel="nofollow noreferrer">Fiddle</a>.</p>
  <p>After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:</p>
  <pre><code>$(document).ready(function(){
      $('.up-down').mouseover(function(){
          $('.default').stop().animate({
              height: 0    
          }, 200);                        
      }).mouseout(function(){
          $('.default').stop().animate({
              height: 200 
          }, 200)    
      })
  
  });
  </code></pre>
  <p><a href="http://jsfiddle.net/jPneT/1/" rel="nofollow noreferrer">Fiddle</a>.</p>
  <p>I've tried reading several JavaScript articles online but they're over my head right now.</p>