[英]JQuery - Div is not sliding off the screen
我试图从本质上讲一页,然后单击按钮,所有内容都滑到左侧,新页面从右侧滑入。
我正在另一篇文章中研究JS 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>
$('.slide').click(function()
在您的html中没有包含类别slide
元素
$(this).animate({left:'-50%'},500);
您单击的具有该ID的元素将获得left: '-50%'
的属性left: '-50%'
但不会发生任何变化,因为该元素没有position: absolute
css值
在编写代码之前,只需手动更改css即可查看添加到元素中的jquery规则是否有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.