1

我试图从屏幕的一侧滑动一个框，然后通过单击一个按钮让它固定在大约 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>

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

4

1 回答 1

1

这是为您设计的整个 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>
于 2013-10-17T03:38:13.530 回答