Question

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

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

Answer 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>

滑动Div按钮单击，然后隐藏其他框

1 个答案: