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

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

本文关键字：文本 左边 jQuery      更新时间：2023-09-26

我希望能够让"hello"从中心向右滑动出框（并淡出），同时在单击按钮时将"那里"从左侧滑到中心（并淡入）。但是如果不将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/

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

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

https://jsfiddle.net/ghL19cge/

相关文章：