Jquery UI 并排滑动两个 div

Question

我是jqueryUI新手，我想显示和隐藏一些具有幻灯片效果的div，我尝试创建一些代码，但结果不符合预期，如何实现？

我的预期结果是这样的:

如果点击下一页或后退按钮，则.page1与.page2并排

Ps:抱歉我的英语不好

我的代码:

function showpage(page){
	if(page=="page1"){
		$(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
			$(this).removeClass('active');
			$('.page2').show("slide", { direction: "right" }, 1000).addClass('active');
		});
	}else{
		$(".page2.active").hide("slide", { direction: "right" }, 1000, function(){
			$(this).removeClass('active');
			$('.page1').show("slide", { direction: "left" }, 1000).addClass('active');
		});
	}
 }

.page1, .page2{
	display:none;
  }
  .container{
	border: 5px solid #000;
  }
  .container{
	width: 310px;
	height: 310px;
  }
  .page1, .page2{
	width: 300px;
	height: 300px;
	color: #000;
  }
  .container .page1{
	background: yellow;
	padding:5px;
  }
  .container .page2{
	background: green;
	padding:5px;
  }
  
  .active{
	display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">

	<div id="page1" class="page1 active">
		Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
	</div>
	<div id="page2" class="page2">
		Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. 
	</div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');"/>
<input type="button" value="Next" onClick="showpage('page2');"/>

Answer 1

这可以通过将显示函数移到隐藏函数回调之外来完成，例如:

if(page=="page1"){
        $(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
            $(this).removeClass('active');
});
$('.page2').show("slide", { direction: "right" }, 1000).addClass('active');

然后将 position:relative 添加到容器，并将子元素定位为 absolute。

这是一个工作示例:

function showpage(page){

  if(page=="page1"){
  
    $(".page1.active").hide("slide", { direction: "left" }, 1000, function(){
      $(this).removeClass('active');
    });
    $('.page2').show("slide", { direction: "right" }, 1000).addClass('active');
    
  }else{
  
    $(".page2.active").hide("slide", { direction: "right" }, 1000, function(){
      $(this).removeClass('active');
    });
    $('.page1').show("slide", { direction: "left" }, 1000).addClass('active');
    
  }
  
 }

.page1, .page2{
	display:none;
  }
  .container{
	border: 5px solid #000;
  position: relative;
  }
  .container{
	width: 310px;
	height: 310px;
  }
  .page1, .page2{
  position: absolute;
  top: 0;
	width: 300px;
	height: 300px;
	color: #000;
  }
  .container .page1{
	background: yellow;
	padding:5px;
  }
  .container .page2{
	background: green;
	padding:5px;
  }
  
  .active{
	display:block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">

	<div id="page1" class="page1 active">
		Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.
	</div>
	<div id="page2" class="page2">
		Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. 
	</div>
</div><br/>
<input type="button" value="Back" onClick="showpage('page1');"/>
<input type="button" value="Next" onClick="showpage('page2');"/>