Сделать UL Инлайн Во время JQuery UI слайд влево анимации

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.

Добавление «поплавка: слева, ширина: 30%» помогает, но оно все еще прыгает. (Второй один на jsFiddle)

Дисплей: встроенный, кажется, вызывает странность, а также ...

Любая идея, как это сделать?

Answer 1

Одно из возможных решений ...

я решил попробовать что-то еще, а теперь запустить анимацию ПОСЛЕ выдвигающейся анимация заканчивается

Updated 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; 
}