從背景向左滑動菜單

------------- 
    | header | 
    ------------ 
    | |  | 
    | L|content | 
    | |  | 
    ------------- 

    ------------- 
    | header | 
---------------- 
| <- |   | 
| L |content | 
| <- |   | 
-----------------

我需要創建一個250像素寬度和300高度的JQuery框。它將包括（1）標題（2）左邊的一個小欄，它應該將左側的病房（顯示菜單）切換，並且在點擊時回到原始位置，以及（3）內容的右側部分。我在JQuery中相當新，並且可以想到下面的代碼，它們在Chrome中或多或少地工作，但在IE中失敗很多。從背景向左滑動菜單

<html> 
<head> 
    <script src="jquery[1].js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #gcontainer { 
      height:300px; 
      width:350px; 
      background-color:#ffffff; 
      margin-left:100px; 

     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:0px; 
      position:relative; 
      z-index:0; 
      overflow:hidden: 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 


<div id="gcontainer"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 

</body> 
</html>

請建議。

來源

2011-11-21 helloworld

這裏的問題似乎與您的HTML/CSS，而不是javascript/jquery。首先，你不應該有多個具有相同ID的div。所以我不知道你爲什麼有兩次#gcontainer。如果您想將相同的樣式應用於多個div使用類。在你的CSS中，你的樣式爲#gcontainer兩次，這也是沒有意義的，因爲第二次覆蓋第一個。另外請記得總是將<!DOCTYPE html>添加到頁面的頂部，否則瀏覽器將以怪癖模式進行渲染，這可以做各種意想不到的事情。

無論如何，我刪除了HTML和CSS中的額外#gcontainer，並編輯了一些邊距。最後，我在整個事物上添加了一個包裝，並將餘量放在左側，這樣您的幻燈片就不會離開屏幕。這應該在IE和Chrome的工作：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/JavaScript"></script> 
    <style type="text/css"> 
     #wrapper { 
     margin-left: 100px; 
     } 

     #gheader{ 
      height:50px; 
      width:350px; 
      background-color:#feee00; 

     } 

     #gtray{ 
      height:250px; 
      background-color:#006600; 
      width:130px; 
      float:left; 
      margin-left:0px; 
      margin-right:-130px; 
      position:relative; 
      z-index:0; 
      overflow:hidden; 
     } 

     #gcontainer{ 
      height:250px; 
      width:320px; 
      margin-left:30px; 
      background-color:darkblue; 
      float:left; 
      position:absolute; 
     } 
    </style> 

    <script type="text/JavaScript"> 
    $(function(){ 
     $('#gtray').toggle(
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'-100px'},'slow'); 
      }, 
     function() 
      { 
       $(this).stop(true).animate({marginLeft:'0px'},'slow'); 
      }); 
    }); 
    </script> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="gheader"><h2>HEADER</h2></div> 
    <div id="gtray"> 
     <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span> 
     <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span> 
    </div> 
    <div id="gcontainer"></div> 
</div> 
</body> 
</html>

來源

2011-11-21 10:11:31

嗨Sanketh ...謝謝。它在IE和Chrome中都很出色。但是，仍然存在一個小毛刺...當滑動托盤向左滾動時，您會看到滑動條會稍微改變其寬度，導致「打開」切斷一秒。如何解決這個問題，因爲它不會產生整潔和整潔的動畫。謝謝。 – helloworld

如果您放慢幻燈片（以毫秒爲單位將「慢」更改爲數字），它可能會看起來更平滑一些。如果你只是擔心文本被切斷，你可以在Open上添加一些填充。除此之外，您可能需要考慮使用另一個工具，如[jQuery Easing Plugin]（http://gsgd.co.uk/sandbox/jquery/easing/）或[jQuery UI的效果]（http：// jqueryui .com/docs/effect /），這可能會提供更多的平滑選項。希望那些幫助 –

從背景向左滑動菜單

回答

相關問題