Html Javascript 移动 div onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15038989/
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
Javascript move div onClick
提问by OliverW
I'm trying to get a div #sidebarthat rests above my main #streamdiv to move from position left: 565px;to position left: 0px;onClick of one image in the #sidebardiv (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
我试图让一个#sidebar位于我的主#streamdiv上方的div 从一个位置移动left: 565px;到left: 0px;另一个位置onClick 在#sidebardiv 中的一个图像（下图中的红色箭头），并对同一图像执行反向 onClick。我知道我必须使用 JavaScript，但我不知道代码是什么。如果可能，我也想为 div 移动设置动画。
The pre-clicked state (the arrow will be my link):
预点击状态（箭头将是我的链接）：
The post-clicked state:
点击后的状态：
Thanks in advance!
提前致谢！
回答by Daniel Wardin
If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
如果您想使用 animate 对其进行动画处理，请查看此内容。它应该让你指向正确的方向：
http://jsfiddle.net/3DpfJ/5/embedded/result/- Full screen result
http://jsfiddle.net/3DpfJ/5/embedded/result/- 全屏结果
http://jsfiddle.net/3DpfJ/5/- source code
http://jsfiddle.net/3DpfJ/5/- 源代码
So what I simply did was this:
所以我所做的就是这样：
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
这可能是通过动画实现的最简单的方法。持续时间设置为 400，因此动画需要 0.4 秒。随意调整。
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script>tag in the header and put the code there.
加载页面后应立即执行此脚本以确保展开工作。您需要<script type="text/javascript"></script>在标题中创建标签并将代码放在那里。
Hope it works for you.
希望对你有效。
回答by Antonio Papa
$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});
回答by PCoelho
jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
jquery 使用切换来处理这个。它比常规的“动画”效果更好，因为它将隐藏和显示合并为一个功能（切换）。
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/
您可能需要进行一些调整以满足您的需求，但这应该会让您开始：http: //jqueryui.com/toggle/
