javascript 滑动 div onclick 左/右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18172909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sliding div onclick left/right
提问by Hybrid82
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
下面提供的是我的 html 和 css 代码的片段，我不仅需要添加 html 和 css，而且还需要添加 javascript 以及如何使其作为滑入/滑出（打开的权利）和（左关闭）div？
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
我目前没有为此编写任何 javascript，因为我不知道从哪里开始……但是，我使用的是 jquery-1.3.2
If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
如果有人可以提供 jsfiddle，我将不胜感激；)
HTML
HTML
<div id="left">
<a href="#">Edit Profile</a>
<a href="#">Settings</a>
<a href="?logoff">Sign Out</a>
</div>
CSS
CSS
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I'm assuming I'd need to add an id or class as either #open, #closeand/or .open, .close.
我假设我需要添加一个 id 或类作为#open,#close和/或.open, .close。
回答by Shuma
You could use jQuery's animate function, should do the job easy enough.
您可以使用 jQuery 的 animate 函数，应该很容易完成这项工作。
Tutorial/Information on .animate:
关于 .animate 的教程/信息：
http://viralpatel.net/blogs/understanding-jquery-animate-function/
http://viralpatel.net/blogs/understanding-jquery-animate-function/
回答by Reactgular
There really isn't enough info here to know what you want, because the layout of the page is important. Without knowing if the menu should be absolute, fixed or relative.
这里确实没有足够的信息来了解您想要什么，因为页面的布局很重要。不知道菜单应该是绝对的，固定的还是相对的。
You can use jQuery's animate() method to animate CSS numeric properties, and then use mouseenterand mouseleaveto slide the menu.
您可以使用 jQuery 的 animate() 方法为 CSS 数字属性设置动画，然后使用mouseenter和mouseleave滑动菜单。
http://jsfiddle.net/thinkingmedia/8a7GL/1/
http://jsfiddle.net/thinkingmedia/8a7GL/1/
It's only 2 lines of code.
它只有2行代码。
