我想创建一个 slider 面板，它将隐藏，当我单击时，它会打开并隐藏，我正在尝试使用此代码但无法获取，当我使用 .hide 时，.animate 函数不起作用。当使用 show 时，div 不是幻灯片，它只是打开形式顶部。但我需要右侧的 slider 打开形式。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#ccc;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}
.slider{
background:#30373f;
position:absolute;
width: 100%;
height:100%;
top: 0;
right:0px;
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$('.slider').hide();
});
$(document).ready(function(e) {
$('.click').click(function(e) {
$('.slider').animate({right:'100%'});
});
});
</script>
</head>
<body>
<div class="click">click for slider</div>
<div class="slider">
<div class="text" style="color:#fff; float:right; margin-right:5px; top:10px; z-index:99999; background:#000; position:relative;"><h3><i class="fa fa-times" aria-hidden="true"></i></h3></div>
</div>
</body>
</html>
最佳答案
您可以引用下面的代码来了解一下。在页面加载时， slider 的右位置设置为超出可见范围，并且在单击标签时，我们设置其右位置以使其可见。
$(document).ready(function(e) {
$('.click').click(function(e) {
$('.slider').animate({right:'0px'});
});
$('.hideButton').click(function(e) {
$('.slider').animate({right:'-100%'});
});
});body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#ccc;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}
.slider{
background:#30373f;
position:absolute;
width: 100%;
height:100%;
top: 0;
right:-100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="click">click for slider</div>
<div class="slider"></div>
<div class="text hideButton" style="color:#fff; float:right; margin-right:5px; top:10px; z-index:99999; background:#000; position:relative;"><h3><i class="fa fa-times" aria-hidden="true">Hide</i></h3></div>
</body>关于javascript - jQuery 右侧 slider 面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37696329/