gpt4 book ai didi

Jquery从页面底部向上滑动div

转载 作者:太空狗 更新时间:2023-10-29 15:26:58 26 4
gpt4 key购买 nike

到目前为止,我有一个 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 &copy; 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>

最佳答案

如果你有另一个类会怎样:

.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

关于Jquery从页面底部向上滑动div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25174144/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com