Question

我做了一个快速的jsFiddle，以显示我遇到的问题：

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

使用UL内联在jQuery UI中向左滑动动画

2 个答案: