Javascript移动div onClick [英] Javascript move div onClick

问题描述

我试图获得一个div #sidebar ，它位于我的主要 #stream div之上以从位置 left：565px; 位置 left：0px; onClick 中的一个图片onClick侧边栏 div（下图中的红色箭头），然后做相同图像的onClick。我知道我必须使用JavaScript，但我不知道代码是什么。如果可能的话，我想为div动画制作动画效果。

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

点击状态：

在此先感谢！

解决方案

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

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

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

所以我简单地做了这个：

$ $ $ $ $ $ $ $ $ $
$ exp $ false ;
（'＃sidebar'）。click（function（）
{
if（！expanded）
{
$（this）.animate（{左''：'0px'}，{duration：400}）;
expanded = true;
}
else
{
$（this）.animate（{ 'left'：'565px'}，{duration：400}）;
expanded = false;
}
}）;
}）;

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

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

希望它适合您。

I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (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.

The pre-clicked state (the arrow will be my link):

The post-clicked state:

Thanks in advance!

解决方案

If you want to animate it using animate have a look at this. It should get you pointed in the right direction:

http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result

http://jsfiddle.net/3DpfJ/5/ - source code

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.

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.

Hope it works for you.

这篇关于Javascript移动div onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！