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

i want able have "hello" slide center right out of frame (and fade out) while @ same time have "there" slide left center (and fade in) when button clicked. can't figure out how achieve without having divs on separate lines.

ultimately want build sliding menu controllable "next" , "prev" buttons, figured i'd start small. thank you!

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/

you can position absolute these divs. see modified example.

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

https://jsfiddle.net/ghl19cge/