Jquery UI 滑动两个 div 并排

Question

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

我的预期结果是这样的：

如果按钮 next 或 back 单击，.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');"/>

Answer 2

将 position:absolute; 添加到 .page1 和 .page2 也用于动画

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

请参阅下面的代码段：

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

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

Jquery UI 滑动两个 div 并排

Jquery UI Slide two div alongside

html

jquery

jquery-ui

slide