从背景向左滑动菜单

------------- 
    | 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 /），这可能会提供更多的平滑选项。希望那些帮助 –

从背景向左滑动菜单

回答

相关问题