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

Question

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

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

$(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 的类并对其进行动画处理（jquery ui），但效果或多或少是相同的。

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

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

谢谢你们！

Answer 1

你可以在你的代码中改进很多东西来实现你想要的。

首先，活动类设置为幻灯片，但未应用任何特殊的 CSS 规则，因为您将 position: absolute 设置为您的 div，您必须将 z-index 设置为重叠，初始化您的应用。

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

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