从页面底部向上移动Jquery幻灯片div
从页面底部向上移动Jquery幻灯片div
提问于 2014-08-07 04:26:27
到目前为止，我有一个div固定在页面底部，底部的页边距设置为负数，以便将其中的大部分隐藏在屏幕下面。我想要创建一个Jquery按钮，让它全部滑到页面上，但是到目前为止，我尝试过的一切都没有奏效。我对这件事不太有经验，所以我可能一直在做这件事。
总之，这是我的CSS：
.foot {
border-top: 1px solid #999999;
position:fixed;
width: 600px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
background: #FFF;
display: flex;
justify-content: center; /* align horizontal */
border-top-left-radius:25px;
border-top-right-radius:25px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -475px;
}我的HTML：
<div class="foot">
Copyright 2014 © Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>密码我已经试过了。它让div从页面上滑落下来：
<script>
$(document).ready(function(){
$(".clocker").click(function(){
$(".foot").slideUp(2000);
});
});
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-07 04:55:30
如果你还有一堂课呢：
.slide-up
{
bottom: 0px !important;
}
.slide-down
{
bottom: -475px !important;
}您可以单击以下命令添加：
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000, 'easeOutBounce');
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000, 'easeOutBounce');
}
});
});确保首先导入了jQuery UI。
更新的JSFiddle
Stack Overflow用户
发布于 2016-06-29 01:31:21
Tris为我工作(在您的代码编辑器中粘贴它)：
<!DOCTYPE html>
<html>
<head>
<title>Slide Up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
.container {
position: absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:80%;
height:600px;
border:1px solid black;
margin:auto;
}
.menuB{
position:absolute;
width:100%;
height:0;
left:0;
bottom:0;
/*transform-origin:100% 100%;*/
background:#2196F3;
opacity:0;
overflow:hidden;
}
.clickMe{
position: absolute;
margin-top: 0;
right: 0;
width: 100%;
height: 30px;
background-color: #2196F3;
color: white;
text-align: center;
cursor: pointer;
}
</style>
<body>
<div class="container">
<div class="menuB">
</div>
<p class="clickMe">Click</p>
</div>
<script type="text/javascript">
var opacity_status = false;
$('.clickMe').on('click', function () {
// body...
if (opacity_status === false) {
$('.menuB')
.animate({
opacity: 1
}, 100)
.animate({
height: '250px'
}, 1500 );
opacity_status = true;
}else{
$('.menuB')
.animate({
height : 0
}, 1500)
.animate({
opacity: 0
}, 2000 );
opacity_status = false;
}
});
</script>
</body>
</html>Stack Overflow用户
发布于 2019-11-10 22:20:42
可能有点晚了，但我希望这会对别人有所帮助。我完全是侥幸发现的，所以我不相信它，也不真正理解它。也许是个窃听器。
我能够使用slideDown()方法并通过将css绝对顶部/底部属性更改为：top: 0;或bottom: 0;来改变上下文菜单的滑动方向，这取决于我想要的方式。
还有一个js小提琴：向上或向下滑动极性
$('.option').click(function(evObject) {
$("#contextContainer").slideDown(2500);
});#contextContainer {
display: none;
background-color: green;
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
z-index: 10;
opacity: 90%;
padding: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="controlContainer">
<div class="option">Click me</div>
</div>
<div id="contextContainer">Context menu!!</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25174144
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号