2

我做了一个快速的 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上的第二个）

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

知道如何做到这一点吗？

4

2 回答 2

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

它“似乎”按照我的意愿工作，但这只是因为动画时间短。

于 2013-02-28T08:45:04.320 回答
0

尝试将其添加到 css：

.step2 {
    position: absolute;
    top: 10px;
}
于 2013-02-28T08:03:40.530 回答