單擊按鈕時滑動div，然後隱藏其他框

我試圖從屏幕的一側滑動一個框，然後通過單擊一個按鈕讓它在大約200px的範圍內定位，然後再次單擊該按鈕時，我希望它隱藏起來。我已經在整個網站上反覆觀察，發現沒有任何代碼可以爲我工作，或者給我沒有任何期望的效果，例如沒有滑動。這將在下面看到我的代碼：單擊按鈕時滑動div，然後隱藏其他框

<!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」左到視圖或在點擊與「box_button」的ID按鈕向右滑動拿出來看。我想實現多個按鈕滑入不同的框，隱藏前面的框。我如何實現這一目標？

來源

2013-10-17 Elton Rodriguez

一個簡單的方法是把它向上和向下滑動像http://jsfiddle.net/arunpjohny/Nyya7/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-17 03:38:13

是的，這工作，但我明白了爲什麼它的工作，我發現我的愚蠢的錯誤從我的結尾。感謝您的耐心等待，我爲此感到抱歉。 –

單擊按鈕時滑動div，然後隱藏其他框

回答

相關問題