jQueryUI 幻灯片效果 - Divs 堆叠

Question

我正在尝试使用 jQueryUI 幻灯片效果使用以下代码将一个 div 滑出和另一个 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

要同时执行任何两个动画，您必须对两个效果都使用“队列”选项，并将值设置为 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/

在下面的第二个小提琴中，我尽可能地保持您的结构，但默认动画效果为“摇摆”。这显示了两个动画同时运行并且彼此叠加。使用默认的“摇摆”动画，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>

基本上，您需要将每个<td> 的内容与<div> 一起包含在一个表格中，以便并排显示多个内容。您将它们放在两个不同的表中，因此导致 堆叠。 再次不清楚您想要什么，但我希望我能够提供帮助。