Make UL Inline During jQuery UI slide left animation

Question

I made a quick jsFiddle to show what I'm having the problem with:

jsFiddle

JavaScript (mostly from Multipart Form - jQuery)

$('.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;   
});

HTML

Non-Floater
<form class="a">
   <ul class="step step1">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="continue">Continue</button>
      </li>
   </ul>

   <ul class="step step2">
      <li>item</li>
      <li>item</li>
      <li>
        <button class="back">Back</button>
        <button class="continue">Continue</button>
      </li>
   </ul>
</form>

Floater
<form class="floater">
   <ul class="step step1">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="continue">Continue</button>
      </li>
   </ul>

   <ul class="step step2">
      <li>item</li>
      <li>item</li>
      <li>
         <button class="back">Back</button>
         <button class="continue">Continue</button>
      </li>
   </ul>
</form>

CSS

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.floater ul {
   width: 30%;
   float: left;
}

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.

Adding a "float:left; width:30%" helps, but it still jumps around. (Second one on the jsFiddle)

Display: inline seems to cause weirdness as well...

Any idea how to accomplish this?

Answer 1

One possible solution...

I decided to try something else, and now run the animations AFTER the slide out animation finishes

Updated jsFiddle

Changed JavaScript

$('.step1').siblings('ul').hide(); // hide all except step 1

$('.continue').click(function(){
    $(this).closest('.step').hide('slide',{direction:"left"},300, function() {
        $(this).next('.step').show("slide",{direction:"right"},200);
    });
    return false;
});
$('.back').click(function(){
    $(this).closest('.step').hide('slide',{direction:"right"},300, function() {
        $(this).prev('.step').show("slide",{direction:"left"},200);
    });
   return false;
});

It "appears" to work how I want, but only because of the short animation time.

Answer 2

Try adding this to the css:

.step2 {
    position: absolute;
    top: 10px;
}