title: Jquery slide from left to right not working
body: <p>I am trying to get a slide left from right effect in jquery when I click a div. This is the HTML I am using.</p>
  
  <pre><code>&lt;div id="myDiv" style="height: 70px; display: none; background-color:#eee; position: absolute; bottom: 1px; width: 100%"&gt;
  &lt;img style="margin-left: 9px; top: 8px; position: absolute" id="transparent-image" src="images/hover.png" alt=""&gt;
  &lt;p class="bi" style="display: inline; color: black; margin-left: 7%; position: absolute"&gt;Webbing in an alternative social network. based on intrests and interactions between people all over the world.&lt;/p&gt;
  </code></pre>
  
  <p>
  </p>
  
  
      
  
  
  <p>And this is the jquery I am trying to use.</p>
  
  <pre><code>$(function()
  {
    $("#toggle").click(function () {
      $(".sliding").css("display","none");
      //$(".sliding").animate({left:'-240px'});
      // Set the effect type
      var effect = 'slide';
  
      // Set the options for the effect type chosen
      var options = { direction: 'left' };
  
      // Set the duration (default: 400 milliseconds)
      var duration = 10000;
  
      $('#myDiv').toggle(effect, options, duration);
    });
  </code></pre>
  
  <p>What I have achieved is the div is displaying onclick, but it is not sliding out in from left to right. Please help me out. I appreciate your help. Thanks. </p>
  
  <p>I added the jsfiddle link as well. <a href="http://jsfiddle.net/yLyr599z/" rel="nofollow">http://jsfiddle.net/yLyr599z/</a></p>