Javascript 移动 div onClick答案

【问题标题】：Javascript move div onClickJavascript 移动 div onClick
【发布时间】：2013-02-23 09:23:17
【问题描述】：

我正在尝试让位于我的主要 #stream div 上方的 div #sidebar 从位置 left: 565px; 移动到位置 left: 0px; onClick #sidebar div 中的一个图像（红色箭头在下图），然后对同一图像执行反向 onClick。我知道我必须使用 JavaScript，但我不知道代码是什么。如果可能的话，我也想为 div 移动动画。

预点击状态（箭头将是我的链接）：

点击后状态：

提前致谢！

【问题讨论】：

标签： javascript html jquery-animate move

【解决方案1】：

如果您想使用 animate 对其进行动画处理，请查看此内容。它应该让你指向正确的方向：

http://jsfiddle.net/3DpfJ/5/embedded/result/ - 全屏结果

http://jsfiddle.net/3DpfJ/5/ - 源代码

所以我只是这样做：

$(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;
                          }
                      });
 });

这可能是通过动画实现的最简单的方法。持续时间设置为 400，因此动画需要 0.4 秒。随意调整。

应在加载页面后立即执行此脚本，以确保展开工作。您需要在标题中创建<script type="text/javascript"></script> 标记并将代码放在那里。

希望它对你有用。

【讨论】：

谢谢，您的 JSFiddle 看起来和我想象的完全一样。但我不能让它在我的代码中工作 - 我已经调用了 jQuery，按照你的建议把它放在中，用 id="sidebar" class="sidebar" 标记我的 div，我仍然可以'不要让 div 和 js 连接。我可以在 div 中有一张桌子吗？这是我唯一能想到的。
是的，你绝对可以，在小提琴中，我在侧边栏上应用了一个浮动权限，我将在答案中发布源代码链接
@OliverW 在这里，jsfiddle 中的源代码已发布在答案中，只需仔细检查侧边栏中的 css 等（向右浮动，相对位置），如果它仍然不起作用，请发布您的 css和代码示例并为您修复它
感谢您的帮助！我将它粘贴在Codepen 中，因为它很长，而且 JS 运行良好……但相同的代码在 Safari 或 Chrome 中没有，独立的。粘贴回 Dreamweaver，仍然没有运气。这很奇怪......
@OliverW 我在 Chrome 中的 Codepen 中尝试过，它在这里完美运行，您是否尝试使用 javascript 调试器和控制台查看出了什么问题？

【解决方案2】：

$('#sidebar').click(function(){
    $(this).animate({"left": "0"});
});

【讨论】：

【解决方案3】：

jquery 使用切换来处理这个问题。它比常规的“动画”效果更好，因为它将隐藏和显示组合成一个功能（切换）。

您可能需要进行一些调整以满足您的需求，但这应该可以帮助您入门：http://jqueryui.com/toggle/

【讨论】：