jQuery Jquery从页面底部向上滑动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25174144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery slide div up from bottom of page
提问by MyNameWouldGoHere
So far, I have a div fixed to the bottom of the page, with the bottom margin set to a minus number, so as to hide most of it below the screen. I'd like to create a Jquery button that made it all slide up onto the page, but everything I have tried so far hasn't worked. I'm not so experienced with it, so I've probably been doing it worng.
到目前为止，我有一个 div 固定在页面底部，底部边距设置为负数，以便将大部分隐藏在屏幕下方。我想创建一个 Jquery 按钮，让它全部滑到页面上，但到目前为止我尝试过的一切都没有奏效。我对它没有那么有经验，所以我可能一直在做它。
Anyway, here's my CSS:
无论如何，这是我的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;
}
And my HTML:
还有我的 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>
Code I already tried. It just made the div slide down off the page:
代码我已经试过了。它只是使 div 从页面上滑下：
<script>
$(document).ready(function(){
$(".clocker").click(function(){
$(".foot").slideUp(2000);
});
});
</script>
回答by Senju
What if you had another class:
如果你有另一堂课怎么办：
.slide-up
{
bottom: 0px !important;
}
.slide-down
{
bottom: -475px !important;
}
which you could add on click:
您可以点击添加：
$(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');
}
});
});
Make sure you have jQuery UI imported first.
确保首先导入了 jQuery UI。
Updated JSFiddle
更新了JSFiddle
回答by Manwal
I believe this is something you want: DEMO
我相信这是你想要的东西： DEMO
$(document).ready(function(){
$(".clocker").click(function(){
$(".foot").animate({bottom:'300px'},1000);
});
});
I have made some changes in your Css also:
我还对您的 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: 0;
}
Update
更新
If you want to close it also See Updated DEMO
如果你想关闭它也请参阅更新的演示
$(document).ready(function(){
$(".clocker").click(function(){
if($(".foot").css('bottom') == '0px'){
$(".foot").animate({bottom:'300px'},1000);
}
else
{
$(".foot").animate({bottom:'0px'},1000);
}
});
});
回答by Baraka Mahili
Tris worked for me (coy and paste that in your code editor):
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>
回答by PowerAktar
Probably a bit late but I hope it will help somebody else. I've made this discovery completely by fluke so I take no credit for it, nor do I really understand it. Perhaps its a bug.
可能有点晚了，但我希望它会帮助别人。我完全是侥幸做出了这个发现，所以我不相信它，我也不真正理解它。也许它是一个错误。
I was able to use the slideDown()method and change the direction that my context menu slides simply by changing the css absolute top/bottom property to:top: 0;or bottom: 0;, depending on which way I wanted to go.
我能够使用该slideDown()方法并更改上下文菜单滑动的方向，只需将 css absolute top/bottom 属性更改为: top: 0;or bottom: 0;，具体取决于我想要的方式。
There's also a js fiddle: Slide up or down polarity
还有一个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>