javascript - Javascript 移动 div onClick

Question

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

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

点击后状态：

提前致谢！

Answer 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>在标题中创建标签并将代码放在那里。

希望对你有效。

Answer 2

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

Answer 3

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

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