title: JQuery UI show('slide', {direction: right}, 500) not sliding, just showing
body: <p>Trying to finally put this baby to bed... (see <a href="https://stackoverflow.com/questions/16473798/jquery-ui-show-slide-not-working-correctly">here</a> and <a href="https://stackoverflow.com/questions/16485417/jquery-using-no-wrap-in-head-on-actual-site">here</a> for context/previous attempts and discussion)</p>
  
  <p>I am trying to hide an element by sliding it to the left/right, and show an element by sliding in from the left or right:</p>
  
  <pre><code>$(oldBox).hide('slide',{direction:'right'},500);
  $(newBox).show('slide',{direction:'right'},500);
  </code></pre>
  
  <p>What actually happens is that the old element hides without sliding, and the new element shows without sliding.</p>
  
  <p>Relevant section(s) of HTML (the same code repeats several times, just has changes in id's and names):</p>
  
  <pre><code>&lt;div class="x" id="waistBox"&gt;
      &lt;div class="measureCol measureColLeft"&gt;
          &lt;span class="measureHeader"&gt;Waist&lt;/span&gt;
          &lt;div class="measureDescription"&gt;
              Surround your waist with the tape measure at the height
              you are most comfortable wearing your pants. Adjust the
              tape measure to your desired snugness, as your purchase
              waist will match this measurement exactly (e.g. 34.75
              inches).
          &lt;/div&gt;
          &lt;div class="measureValue"&gt;
              &lt;input type="text" name="waist" value = "1" id="waistInput" class="editMeasureInfo"/&gt;
              &lt;i&gt;inches&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="measureCol measureColRight"&gt;
          &lt;div class="measureVideoContainer"&gt;
              &lt;img src="../../images/Measure_Video.PNG" class="measureVideo" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery function:</p>
  
  <pre><code>function change_measurement_display(oldDisp, newDisp) {
      var oldBox = '#' + oldDisp + 'Box';
      var newBox = '#' + newDisp + 'Box';
  
      $(oldBox).hide('slide', {
          direction : 'right'
      }, 500);
      $(newBox).show('slide', {
          direction : 'right'
      }, 500); 
  
  
  }
  </code></pre>