jQuery技术:在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的第二个）

显示：内联似乎也会引起怪异……

知道怎么做到这一点？

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

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

以上就是jQuery教程分享在jQuery UI幻灯片左侧动画期间制作UL内联相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。