Question

我正在尝试使用jQueryUI幻灯片效果使用以下代码将一个div滑出（从左到右，左右）：

.data

我得到了我想要的幻灯片效果，但我的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/

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

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

jQueryUI幻灯片效果 - Divs Stacking

2 个答案: