在jQuery UI幻灯片左侧动画期间制作UL内联

我做了一个快速的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 
 
 
item
 
item
 
 Continue 
 
 
 
item
 
item
 
 Back Continue 
 
 
 Floater 
 
 
item
 
item
 
 Continue 
 
 
 
item
 
item
 
 Back Continue 
 
  

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