讓UL內嵌在jQuery用戶界面向左滑動動畫

Question

我做了一個快速的jsfiddle顯示我遇到什麼問題：

jsFiddle

的JavaScript（大多來自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; 
} 

當您單擊「繼續」時，第二個UL進來，但它偏移到當前UL以下。理想情況下，這將直接進入第一個UL的權利。

添加「float：left; width：30％」有幫助，但它仍然會跳轉。 （上的jsfiddle第二個）

顯示：內聯似乎導致怪事，以及...

任何想法如何做到這一點？

Answer 1

一個可能的解決方案......

我決定嘗試別的東西，現在運行的動畫滑蓋後出動畫完成

已更新jsFiddle

更改的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; 
}); 

它「出現」工作如何我想要的，但只是因爲動畫時間短。

Answer 2

嘗試增加此的CSS：

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