jQuery的动画水平滑过

Question

页

嘿所有，另一个有趣的一个，

我建设，将整个页面的整个宽度滑动菜单（宽度：100％;），需要一些帮助。我有一个箭头按钮浮动在页面的右侧，将触发菜单栏点击时滑出。我希望箭头按钮在其前面滑出，并一次性将箭头图像更改为相反的文件。

最大的问题是它们的宽度和高度需要灵活以适应不同的内容。我做了一个微弱的尝试，但我知道我在这里错过了很多因素。我的代码甚至没有触及移动箭头按钮以及其余部分..这不是没有努力！

任何帮助？谢谢！

HTML：

<div id="main"> 
    <div class="trans" id="trigger"> 
      <img class="arrow_small" src="images/left_small.png" alt="slide out menu" /> 
    </div> 
    <div id="slider"> 
      <div class="trans" id="overlay"></div> 
      <div id="content"> 
       <p>this is the content</p> 
      </div> 
    </div> 
</div> 

CSS：

#main { 
    width:100%; 
    height:306px; 
    top:50%; 
    margin-top:-153px; 
    position:absolute; 
} 
#trigger { 
    width:30px; 
    height:100%; 
    float:right; 
    background-color:#000; 
    position:relative; 
    z-index:3; 
} 
.arrow_small { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-6px; 
    margin-top:-12px; 
} 
#overlay { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 
#content { 
    width:100%; 
    height:100%; 
    position:absolute; 
    z-index:2; 

的Javascript：

$(document).ready(function(){ 
//hide functions 
    $('#slider').css('display', 'none'); 
//menu slide out 
    $('#trigger').click(function(){ 
     var bar = $('#slider'); 
      bar.show(function(){ 
       this.animate({'marginRight':'100%'},1000); 
      }); 
    }); 
}); 

Answer 1

这是你在找什么？在浏览器中尝试了这一点：

HTML：

<div id="main"> 
<div id="slider"> 
&nbsp; 
     <div id="image"> 
     <p>Image would go here</p> 
     </div> 
     <div id="content"> 
     <p>content...</p> 
     </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
#slider { 
    width: 6%; 
    height: 350px; 
    top: 33%; 
    background-color: black; 
    position: absolute; 
    right: 0; 
} 
.arrow_small { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-6px; 
    margin-top:-12px; 
} 
#image { 
    width: 75px; 
    background-color: black; 
    position:relative; 
    color: white; 
    float: left; 
} 
#content { 
    position: relative; 
    overflow: hidden; 
    left: 100px; 
    color: white; 
} 

JS：

$(function() { 
    $('#image').toggle(function(){ 
     $("#slider").animate({"width":"100%"}, 1000); 
    }, function() { 
     $("#slider").animate({"width":"6%"}, 1000); 
    }); 
}); 

我去掉你有像你只是因为我没有它和洼通过文本在本地测试。希望这可以帮助！