Javascript 单击按钮时滑动Div，并隐藏其他框_Javascript_Jquery_Html

Javascript 单击按钮时滑动Div，并隐藏其他框

javascript jquery html

Javascript 单击按钮时滑动Div，并隐藏其他框,javascript,jquery,html,Javascript,Jquery,Html,我试图从屏幕的一侧滑动一个框，然后单击一个按钮，让它在大约200px的速度下稳定下来，然后当再次单击按钮时，我希望它滑回隐藏状态。我在网站上反复查看，发现没有一个代码适合我，也没有给我任何想要的效果。下面是我的代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link type="text

我试图从屏幕的一侧滑动一个框，然后单击一个按钮，让它在大约200px的速度下稳定下来，然后当再次单击按钮时，我希望它滑回隐藏状态。我在网站上反复查看，发现没有一个代码适合我，也没有给我任何想要的效果。下面是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script src="style/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script>
    $("#box_button").click(function(){
        if(!$("#hiddenBox").show()) {
            $("#hiddenBox").show()
        } else {
            $("#hiddenBox").hide();
        }
    });
</script>
</head>

<body>
    <div id="container">
        <div id="masterDiv">
            <div id="tab">
                <button id="box_button">Slide</button>
            </div>
            <div id="hiddenBox">
                <p>Just trying to work here.</p>
            </div>
        </nav>
    </div>
</body>
</html>


无标题文件
$（“#框#按钮”）。单击（函数（）{
如果（！$（“#隐藏框”）.show（））{
$（“#hiddenBox”）.show（）
}否则{
$（“#hiddenBox”）.hide（）；
}
});
滑动
只是想在这里工作

我希望在单击id为“box_button”的按钮后，将“hiddenBox”向左滑入视图或向右滑出视图。我想实现多个按钮滑动不同的框，隐藏以前的框。如何实现这一点？

这是为您准备的整个html模型

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fixed {
    position: fixed;
    width: 0px;
    top: 120px;
    left: -10px;
    height: 200px;
    z-index: 1;
    border: 5px solid #ccc;
    background-image: url("http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
    background-position: center;
    background-size: cover;
}
.fixedbutton {
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
background-color:#ededed;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:"Courier", sans-serif;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}.fixedbutton:hover {
background-color:#dfdfdf;
}.fixedbutton:active {
position:relative;
top:1px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('.fixedbutton').toggle(function() {
    $('.fixed').stop().animate({
        width: "200px",
    }, 1000);
}, function() {
    $('.fixed').stop().animate({
        width: "-10px",
    }, 1000);
});
});
</script>
</head>
<body>
<div class="fixed">
</div>
<a href="#" class="fixedbutton">Button</a>
</body>
</html>


.固定{
位置：固定；
宽度：0px；
顶部：120px；
左：-10px；
高度：200px；
z指数：1；
边框：5px实心#ccc；
背景图像：url（“http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
背景位置：中心；
背景尺寸：封面；
}
.固定按钮{
-网络工具包盒阴影：插入0px 1px 0px 0px#ffffff；
-moz盒阴影：插入0px 1px 0px 0px#ffffff；
盒影：插入0px 1px 0px 0px#ffffff；
-webkit边界半径：6px；
-moz边界半径：6px；
边界半径：6px；
背景色：#ededed；
文本缩进：0；
边框：1px实心#DCDC；
显示：内联块；
颜色：#777777；
字体系列：“信使”，无衬线；
字体大小：15px；
字体大小：粗体；
字体风格：普通；
高度：50px；
线高：50px；
宽度：100px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#ffffff；
}.固定按钮：悬停{
背景色：#dfdfdf；
}.fixedbutton：活动{
位置：相对位置；
顶部：1px；
}
$（文档）.ready（函数（）{
$（'.fixedbutton'）.toggle（函数（）{
$（'.fixed'）.stop（）.animate({
宽度：“200px”，
}, 1000);
}，函数（）{
$（'.fixed'）.stop（）.animate({
宽度：“-10px”，
}, 1000);
});
});

这是为您准备的整个html模型

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fixed {
    position: fixed;
    width: 0px;
    top: 120px;
    left: -10px;
    height: 200px;
    z-index: 1;
    border: 5px solid #ccc;
    background-image: url("http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
    background-position: center;
    background-size: cover;
}
.fixedbutton {
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
background-color:#ededed;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:"Courier", sans-serif;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}.fixedbutton:hover {
background-color:#dfdfdf;
}.fixedbutton:active {
position:relative;
top:1px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('.fixedbutton').toggle(function() {
    $('.fixed').stop().animate({
        width: "200px",
    }, 1000);
}, function() {
    $('.fixed').stop().animate({
        width: "-10px",
    }, 1000);
});
});
</script>
</head>
<body>
<div class="fixed">
</div>
<a href="#" class="fixedbutton">Button</a>
</body>
</html>


.固定{
位置：固定；
宽度：0px；
顶部：120px；
左：-10px；
高度：200px；
z指数：1；
边框：5px实心#ccc；
背景图像：url（“http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
背景位置：中心；
背景尺寸：封面；
}
.固定按钮{
-网络工具包盒阴影：插入0px 1px 0px 0px#ffffff；
-moz盒阴影：插入0px 1px 0px 0px#ffffff；
盒影：插入0px 1px 0px 0px#ffffff；
-webkit边界半径：6px；
-moz边界半径：6px；
边界半径：6px；
背景色：#ededed；
文本缩进：0；
边框：1px实心#DCDC；
显示：内联块；
颜色：#777777；
字体系列：“信使”，无衬线；
字体大小：15px；
字体大小：粗体；
字体风格：普通；
高度：50px；
线高：50px；
宽度：100px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#ffffff；
}.固定按钮：悬停{
背景色：#dfdfdf；
}.fixedbutton：活动{
位置：相对位置；
顶部：1px；
}
$（文档）.ready（函数（）{
$（'.fixedbutton'）.toggle（函数（）{
$（'.fixed'）.stop（）.animate({
宽度：“200px”，
}, 1000);
}，函数（）{
$（'.fixed'）.stop（）.animate({
宽度：“-10px”，
}, 1000);
});
});

一个简单的方法是上下滑动，就像我不想在我的项目中实现的那样，它必须是从左到右滑动，然后用虎钳固定。一个简单的方法是上下滑动，就像我不想在我的项目中实现的那样，它必须是从左到右滑动，然后用虎钳固定。是的，这很有效，虽然我明白了为什么它会起作用，我发现了自己的愚蠢错误。谢谢你的耐心，我为给你带来的麻烦道歉。是的，这很管用，尽管我明白为什么管用了，我发现了我的愚蠢错误。谢谢你的耐心，给你添麻烦我向你道歉。