title: How to animate div tag to slide from right to left?
body: <p>I am trying to develope responsive web page. If i click an image, it has to display mymodal div from right to left like slidetoggle (from image has to slide out right to left). 
  If i used below method nothings happen (used many other code which was suggested in stackoverflow for similar question). Div tag is moving different locations if i resize webpage. How to achieve this task? Any guidanece pls</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#mypic').click(function() {
  
    $('#myModal').toggle("slide", {
      direction: "right"
    }, 700);
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.my-modal-header {
    padding: 2px 16px;
    background-color: #424242;
    color: white;
  }
  
  .my-modal-body {
    padding: 2px 16px;
  }
  
  .my-modal-footer {
    padding: 2px 16px;
    background-color: #424242;
    color: white;
    text-align: center;
  }
  
  .my-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 70%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  #closemymodal : {
    position: absolute;
    top: 50%;
    align: center;
  }
  
  .my_modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: -1px;
    right: 10px;
    top: 55px;
    width: 100%;
    height: 100%;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;img id="mypic" height='25' width='25'&gt;
  
  &lt;div id="myModal" class="my_modal" style="overflow:hidden;"&gt;
  
    &lt;div class="my-modal-content"&gt;
      &lt;div class="my-modal-header"&gt;
        &lt;span class="my_modal_close"&gt;&amp;times;&lt;/span&gt;
        &lt;h2 style="font-family: Trebuchet MS, sans-serif !important; font-size:12px;"&gt;Select value&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="my-modal-body"&gt;
  
        &lt;table style="width: 100%"&gt;
          &lt;tr&gt;
            &lt;td style="width: 25%"&gt;&lt;label style="font-family: Trebuchet MS, sans-serif !important"&gt;select:
            &lt;/label&gt;&lt;/td&gt;
            &lt;td style="width: 75%" id="modalSelectTd"&gt;
              &lt;select id="modalValue"&gt; 
              
              &lt;option&gt;  &lt;/option&gt; 
              &lt;option&gt;  &lt;/option&gt; 
              &lt;/select&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
  
      &lt;/div&gt;
      &lt;div class="my-modal-footer"&gt;
        &lt;button id="closemymodal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>