使用UL内联在jQuery UI中向左滑动动画 [英] Make UL Inline During jQuery UI slide left animation

问题描述

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

I made a quick jsFiddle to show what I'm having the problem with:

jsFiddle

JavaScript（主要来自 Multipart Form - jQuery ）

JavaScript (mostly from 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的右侧。

When you click "Continue" the second UL comes in, but it is offset below the current UL. Ideally this would come in directly to the right of the first UL.

添加float：left; width：30％会有所帮助，但它仍会跳转。 （jsFiddle上的第二个）

Adding a "float:left; width:30%" helps, but it still jumps around. (Second one on the jsFiddle)

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

Display: inline seems to cause weirdness as well...

任何想法如何实现这个目标？

Any idea how to accomplish this?

推荐答案

一种可能的解决方案......

One possible solution...

我决定尝试别的东西，现在在幻灯片动画结束后运行动画

I decided to try something else, and now run the animations AFTER the slide out animation finishes

更新了 jsFiddle

更改JavaScript

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

它似乎按照我想要的方式工作，但仅仅因为动画时间短。

It "appears" to work how I want, but only because of the short animation time.

这篇关于使用UL内联在jQuery UI中向左滑动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！