title: animate div on mouse hover and leave
body: <p>I trying to animate listfrom left to right and vice versa,now i want  when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.</p>
  
  <pre><code>$('.ul_div').mouseover(function () {
      $('.ul_div').css({ display: 'block' });
      $('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="ul_div"&gt;Hover Me&lt;div&gt;
  &lt;ul id='ulEle'&gt;
      &lt;li&gt;&lt;a href=""&gt;demo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;demo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;demo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;demo&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Demo <a href="http://jsfiddle.net/subhash9/HCP3L/1/" rel="nofollow noreferrer">Here</a></p>