javascript - 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 将使它们异步运行。

在我下面的第一个 fiddle 中，两个 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/

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

希望这两个 fiddle 的某种组合能让你到达目的地。