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/