jQuery全屏部分向左滑动，向右滑动

Question

我最近和现在正在玩 jquery - 试图让动画工作。

整个想法基本上是一个全屏滑块。我们有几个部分的绝对位置和高度为文档的 100% - 在 jquery 中我们正在使用 z-index。简单来说就是 quite，但我不知道如何制作适当的左右滑动动画。它总是坏掉。

$(document).ready(function() {

 var windowWidth = $(window).width();
 var slideCount = $('.slide').length;

 $('button#next').on('click', function() {
  var slideActive = $('.slide.active');
  var nextSlide = slideActive.next('.slide');
  
  nextSlide.addClass('active').animate({
   'z-index' : '2',
   'left' : windowWidth
  },500);
  
  slideActive.removeClass('active');

 });

 

});;

body, html {
 height: 100%;
 position: relative;
}

body {
 font-size: 14px;
 color: #fff;
}

nav {
 position: absolute;
 top: 2rem;
 right: 2rem;
 z-index: 99;
}

section {
 height: 100%;
 display: flex;
 align-items: center;
 position: absolute;
 right: 0;
 left: 0;
}

section#home {
 background-color: #2c3e50;
}

section#aboutMe {
 background-color: #e74c3c;
}

section#smthElse {
 background-color: #1abc9c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <button id="prev">Back</button>
  <button id="next">Next</button>
</nav>
<section id="home" class="slide active">
  <div class="container">
    <p>1</p>
  </div>
</section>
<section id="aboutMe" class="slide">
  <div class="container">
    <p>2</p>
  </div>
</section>
<section id="smthElse" class="slide">
  <div class="container">
    <p>3</p>
  </div>
</section>

在此之前，我尝试通过在 .css 中定义的 css 添加 class 并对其进行动画处理（jquery ui），但效果更好或差不多。

我想要实现的只是我的部分的简单幻灯片功能。示例行为：http://codepen.io/jibbon/pen/BoisC

另外，我不是在寻找现成的解决方案，因为我需要尽可能简单的代码来按照我的方式学习和开发它。

谢谢大家！

Answer 1

您可以在代码中改进很多地方来实现您想要的。

首先，active class 设置为幻灯片，但未应用任何特殊的 CSS 规则，当您将 position: absolute 设置为您的 div 时，您必须设置 z-index 重叠，初始化您的应用程序。

这里有个想法，如何实现你想要的：

https://jsfiddle.net/nz2hL6vn/1/

jQuery全屏部分向左滑动，向右滑动

jQuery full screen section slide left, slide right

javascript

css

jquery

jquery-ui

slide