javascript - jQuery同时从左滑动文本到中心/从中心到右滑动文本

Question

我希望能够将“hello”幻灯片从中心向右移出框架(并淡出)，同时将“there”幻灯片从左侧移至中心(并淡入) )当单击按钮时。但我无法弄清楚如何在不将 div 放在单独的行上的情况下实现此目的。

最终我想构建一个可以通过“下一个”和“上一个”按钮控制的滑动菜单，所以我想我应该从小事开始。谢谢!

HTML:

  <div id="test">
    hello
  </div>

  <div id="test2">
    there
  </div>

  <button id="next">
    Next
  </button>

</body>

JavaScript:

 $(document).ready(function() {

   $("#next").click(function() {

     $("#test").hide("slide", {
       direction: "right"
     }, 1000);

     $("#test2").show("slide", {
       direction: "left"
     }, 1000);

   });

 });

https://jsfiddle.net/qftqzr6f/

Answer 1

您可以绝对定位这些 div。请参阅修改后的示例。

#wrapper{height:50px;position:relative}
#wrapper div{position:absolute;width:100%}

https://jsfiddle.net/ghL19cge/