Jquery UI滑动两个div旁边

Question

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

我的预期结果如下：

如果按钮下一个或返回，点击 .page1 以及 .page2

Ps：抱歉我的英文不好

我的代码：

body{
  height: 2000px;
}


.row .bot{
  height: 150px;
  background-color: blue;
}

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;
  }

Answer 1

这可以通过移动隐藏函数回调之外的show函数来完成，例如：

transaction underpriced

然后将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;
  }

Answer 2

将position:absolute;添加到botth .page1和.page2以获取广告

只是同时触发它们，而不是在回调函数中，

见下面的摘录：

＆＃13;

＆＃13;

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');
  }
}

＆＃13;

.page1,
.page2 {
  display: none;
  position:absolute;
}



.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;
}

＆＃13;

<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');" />

＆＃13;

＆＃13;

＆＃13;