jQuery同时将文本从左侧滑动到中心/从中心向右滑动文本

Question

我希望能够从中心向右滑动“hello”滑动（并淡出），同时让“there”从左侧滑动到中间（并且淡入） ）单击按钮时。但我无法弄清楚如何在没有div的情况下实现这一点。

最终我想构建一个可以通过“next”和“prev”按钮控制的滑动菜单，所以我想我会从一些小的东西开始。谢谢！

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/