jQuery 전체 화면 섹션 슬라이드 왼쪽, 슬라이드 오른쪽

Question

jquery로 최근에 놀고 있습니다. 애니메이션을 작동 시키려고합니다.

전체 아이디어는 기본적으로 전체 화면 슬라이더입니다. 문서의 위치 절대 값과 높이가 100 % 인 섹션이 거의 없습니다. jquery에서 Z- 인덱스를 사용하고 있습니다. 아주 간단하지만 적절한 슬라이드 왼쪽 및 오른쪽 애니메이션을 만드는 방법을 알 수 없습니다. 항상 깨고있어. 난 그냥 CSS를 .CSS에 정의와 클래스를 추가하고 (JQuery와 UI)를 애니메이션하지만 효과가 더 많거나 적은 동일 재판을 그 전에

$(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>

.

내가 원하는 것은 나의 섹션의 간단한 슬라이드 기능입니다. 동작 예 : http://codepen.io/jibbon/pen/BoisC

또한 가능한 한 간단한 코드를 배우고 개발하는 데 필요한 준비된 솔루션을 찾는 것이 아닙니다.

감사합니다.

Answer 1

원하는 것을 얻기 위해 코드를 향상시킬 수있는 많은 것들이 있습니다.

먼저 활성 클래스는 슬라이드로 설정되지만 div에 position: absolute을 설정하면 특수 CSS 규칙이 적용되지 않으므로 z-index을 위에 겹쳐서 설정하여 앱을 초기화해야합니다.

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