title: Make UL Inline During jQuery UI slide left animation
body: <p>I made a quick jsFiddle to show what I'm having the problem with:</p>
  
  <p><a href="http://jsfiddle.net/x2MgQ/10/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>JavaScript (mostly from <a href="https://stackoverflow.com/questions/3052120/multipart-form-jquery">Multipart Form - jQuery</a>)</p>
  
  <pre><code>$('.step1').siblings('ul').hide(); // hide all except step 1
  
  $('.continue').click(function(){
      $(this).closest('.step').hide("slide", direction:"left"},1500).parent().next('.step').show("slide",{direction:"right"},1500);
      return false;
  });
  
  $('.back').click(function(){
      $(this).closest('.step').slideUp().prev('.step').slideDown();
      return false;   
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>Non-Floater
  &lt;form class="a"&gt;
     &lt;ul class="step step1"&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;
           &lt;button class="continue"&gt;Continue&lt;/button&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  
     &lt;ul class="step step2"&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;
          &lt;button class="back"&gt;Back&lt;/button&gt;
          &lt;button class="continue"&gt;Continue&lt;/button&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/form&gt;
  
  Floater
  &lt;form class="floater"&gt;
     &lt;ul class="step step1"&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;
           &lt;button class="continue"&gt;Continue&lt;/button&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  
     &lt;ul class="step step2"&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;item&lt;/li&gt;
        &lt;li&gt;
           &lt;button class="back"&gt;Back&lt;/button&gt;
           &lt;button class="continue"&gt;Continue&lt;/button&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
  }
  .floater ul {
     width: 30%;
     float: left;
  }
  </code></pre>
  
  <p>When you click "Continue" the second UL comes in, but it is offset below the current UL.  Ideally this would come in directly to the right of the first UL.</p>
  
  <p>Adding a "float:left; width:30%" helps, but it still jumps around.  (Second one on the jsFiddle)</p>
  
  <p>Display: inline seems to cause weirdness as well...</p>
  
  <p>Any idea how to accomplish this?</p>