jQuery全屏部分向左滑动,向右滑动
问题描述:
我正在玩jquery最近和现在 - 试图让动画工作。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
另外,我不是在寻找现成的解决方案,因为我需要尽可能简单的代码,以我的方式进行学习和开发。
谢谢你们!
答
有很多事情,你可以改善你的代码来实现你想要的。
首先,活动类设置为幻灯片,但没有应用任何特殊的CSS规则,因为您将position: absolute
设置为您的div,您必须将z-index
设置为重叠一个高于其他值,初始化您的应用。
在这里有一个想法,如何实现你想要什么:
+0
我有类似的效果,这是稍微好一点的寿。然而,它还远没有完美。 首先 - 动画获得越野车,并且滑动之后,来自上一张幻灯片的比赛保持一秒钟。其次 - 有时会出现底部滚动条。 无论如何,要尝试继续! – ficus
所以,你是想只与CSS3动画做到这一点? –
不,我打开所有选项,其中包括html/css/jquery甚至jquery ui – ficus