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

Question

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

整个想法基本上是一个全屏滑块。我们有几个绝对位置和高度100％的文档 - 在jQuery中我们使用z-index。这很简单，但我无法弄清楚如何制作适当的幻灯片左右动画。它总是打破。

$(document).ready(function() { 
 

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

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

 
\t }); 
 

 
\t 
 

 
});;

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

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

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

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

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

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

 
section#smthElse { 
 
\t 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用户界面），但效果或多或少相同尝试过。

我想要的所有功能都是我的部分的简单滑动功能。 行为举例：http://codepen.io/jibbon/pen/BoisC

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

谢谢你们！

Answer 1

有很多事情，你可以改善你的代码来实现你想要的。

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

在这里有一个想法，如何实现你想要什么：

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