Javascript移动div onClick

Question

我正在尝试获取位于我的主#sidebar div之上的div #stream，以便从位置left: 565px;移动到位置left: 0px; on { {1}} div（下图中的红色箭头），然后对同一图像执行相反的操作。我知道我必须使用JavaScript，但我不知道代码是什么。如果可能的话，我也希望动画div动作。

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

点击后的状态：

提前致谢！

Answer 1

如果您想使用动画制作动画，请查看此内容。它应该让你指向正确的方向：

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>标记并将代码放在那里。

希望它适合你。

Answer 2

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

Answer 3

jquery使用切换来处理这个问题。它比常规的“animate”效果更好，因为它将hide和show组合成一个函数（toggle）。

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