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/

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

jQuery simultaneously slide text to center from left / slide text from center to right

html

javascript

jquery

sliding