我基本上尝试在 1 个页面上单击按钮,所有内容都滑到左侧,新页面从右侧滑入。
我正在处理 this JS Fiddle来自另一篇文章并尝试将其调整到我的网站,但我不明白为什么它不起作用。
我工作的这个 fiddle 使用这个 JQuery:
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-50%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
这是我的 Jquery:
$(document).ready(function () {
$('.slide').click(function()
{
$('.sliding-container').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-50%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
});
任何想法将不胜感激。
请在此处查看我的 CodePen 以获取我的其余代码: https://codepen.io/Magicrecon/pen/BRzXRa
最佳答案
在您之前的代码的基础上,这里有一些提示
slider
的 id 标签并将其添加为类
请看下面的片段
$(document).ready(function() {
$('.slide').click(function() {
var that = this;
$('.sliding-container').each(function() {
if ($(that).parents(".sliding-container")[0] != this) {
$(this).css("left", "100%")
} else {
$(this).animate({
left: '100%'
}, 500);
}
if ($(that).parents(".sliding-container").next().index() == 3) {
$(".sliding-container:first-child").animate({
left: '0%'
}, 500);
} else {
$(that).parents(".sliding-container").next().animate({
left: '0%'
}, 500);
}
});
});
});
#mainscreen-container {
position: absolute;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.sliding-container {
position: absolute;
width: 100vw;
}
#sliding-container1 {
background-color: red;
}
#sliding-container2 {
background-color: green;
left: 150%;
}
#sliding-container3 {
background-color: blue;
left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainscreen-container">
<div id="sliding-container1" class="sliding-container">
<div style="height: 100vh; width: 100%">
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left slide-button"> </span>
</div>
<div class="header-container">
<div style="height: 40vh; display: block;"></div>
<p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
<div style="height: 20vh; display: block;"></div>
</div>
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right slide-button"> </span>
</div>
</div>
</div>
<div id="sliding-container2" class="sliding-container">
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left"> </span>
</div>
<div class="header-container">
<div style="height: 40vh; display: block;"></div>
<p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
<div style="height: 20vh; display: block;"></div>
</div>
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right"> </span>
</div>
</div>
<div id="sliding-container3" class="sliding-container">
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left"> </span>
</div>
<div class="header-container">
<div style="height: 40vh; display: block;"></div>
<p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p>
<div style="height: 20vh; display: block;"></div>
</div>
<div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;">
<span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right"> </span>
</div>
</div>
关于javascript - JQuery - Div 没有滑出屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43576682/