jQueryUI幻灯片效果-Divs堆叠

Question

我正在尝试使用jQueryUI滑动效果，使用以下代码将一个div滑出，另一个滑入（从左至右，从右至左）：

$("#previous").on('click', function(){
    $("#2DivT").effect( "slide", { "direction" : "left",  "mode" : "hide"}, 900);
    $("#1DivT").effect( "slide", { "direction" : "right",  "mode" : "show"}, 900);
});

$("#next").on('click', function(){
    $("#1DivT").effect( "slide", { "direction" : "right",  "mode" : "hide"}, 900);
    $("#2DivT").effect( "slide", { "direction" : "left",  "mode" : "show"}, 900);
});

我得到了想要的滑动效果，但是我的div彼此堆叠，而不是同时滑动。 我设置了一个jsfiddle来显示问题：

https://jsfiddle.net/aoverton07/f6rtrst3/4/

我需要更改以获得期望的结果？

Answer 1

要同时执行任何两个动画，必须在两个效果上都使用“ queue”选项，并将其值设置为false。 默认情况下，每个效果都同步排队。 将“ queue”设置为false将使它们异步运行。

在下面的第一个小提琴中，两个div根据按钮的点击向左/向右滑动。 您会注意到，我做了一些额外的CSS操作，将div相对放置在彼此的顶部，以实现所需的滑动效果，并且在元素上设置了特定的宽度。 在进行幻灯片效果时，动画元素在显示或隐藏时需要额外的空间才能“转到”，因此可以通过宽度和位置操作来克服此问题。 使用“队列”，JavaScript如下所示：

$("#previous").on('click', function(){
    $("#2DivT").css("left", "-179px").effect("slide", { direction: "left", duration: 900, mode: "hide", queue: false });
    $("#1DivT").effect("slide", { direction: "right", duration: 900, mode: "show", queue: false });
});

$("#next").on('click', function(){
    $("#2DivT").effect("slide", { direction: "left", duration: 900, mode: "show", queue: false }, function() { $(this).css("left", "0"); });
    $("#1DivT").effect("slide", { direction: "right", duration: 900, mode: "hide", queue: false });
});

https://jsfiddle.net/f6rtrst3/34/

在下面的第二个小提琴中，我保持了您的结构尽可能接近，但是将动画效果默认设置为“摇摆”。 这显示了两个动画同时运行并且彼此重叠。 使用默认的“ swing”动画，javascript如下所示：

$("#previous").on('click', function(){
    $("#2DivT").hide({ queue : false, duration : 900 });
    $("#1DivT").show({ queue : false, duration : 900} );
});

$("#next").on('click', function(){
    $("#1DivT").hide({ queue : false, duration : 900 });
    $("#2DivT").show({ queue : false, duration : 900 });
});

https://jsfiddle.net/f6rtrst3/36/

希望这两个小提琴的某种组合能使您前进。

Answer 2

不知道“同时滑动”是什么意思，但是我设置了一个jsfiddle来获取我认为您要使用的要点： https ://jsfiddle.net/2xm4smbL/

您需要更改css使其不闪烁，但我不知道您想要它的外观，所以我没有为您做过。 您可能还需要更改左右值

<table>
            <tr>
              <td>
                <div style="float:left;width:70%;" id="1DivT">
                  <input type="number"  />
                </div>
              </td>

              <td>
                <div style="float:left;width:70%;display:none;" id="2DivT">
                  <input type="number" />
                </div>
              </td>
            </tr>
            </table>

基本上，您需要用<div>包含每个<td>的内容，以获取一个表来并排显示多个内容。 您将它们放在两个不同的表中，从而导致了堆栈。 再次不清楚您想要什么，但希望我能提供帮助。