使用 Javascript 移动/动画 div答案

【问题标题】：Move/Animate Div with Javascript使用 Javascript 移动/动画 div
【发布时间】：2015-06-01 19:01:52
【问题描述】：

我想使用 javascript 移动 div。

例如，如何使用 javascript 将div 向左移动 50 像素？

我希望在单击链接后启动该功能。有谁知道这是怎么做到的？

【问题讨论】：

欢迎来到 Stack Overflow！您可能想查看how to ask a question。正确格式化您的问题将大大有助于获得您正在寻找的答案。

标签： javascript html move

【解决方案1】：

以下是可行的：

HTML：

<div class="container">
    <span id="box"></span>
</div>
<a href="#" id="move-test">Move test element.</a>

CSS：

.container {
    position: relative;
    width: 100%;
    height: 50px;
    padding: 10px;
    background-color: beige;
    margin-bottom: 20px;
}

#box {
    position: absolute;
    top: 10px;
    left: 100px;
    height: 30px;
    width: 30px;
    background-color: blue;
}

Javascript:请把它放在文档准备函数中。

$("#move-test").on('click', function (e) {
    e.preventDefault();
    moveBox();
});

var moveBox = function(){
    var $box = $("#box");
    var left = $box.position().left;
    left = left - 20;
    $box.css('left', left + 'px');
};

这是一个不断移动的 jsfiddle：

https://jsfiddle.net/5ncb6szg/

【讨论】：

感谢您的回复！
如果您喜欢我的回复，请点赞，因为我今天也刚加入 stackoverflow！
所以问题是，我正在制作一个联系页面。现在我把它的 div 框放在了超远的右边，所以没有人可以看到它，比如右边的 10000px，当我点击链接“联系人”时，我希望它回来。我有这个：
联系方式

我试图找出 javascript，我有这个： var movecontact = document.getElementById("contactpage");功能弹出（） { movecontact.style.left = '100px'; }

【解决方案2】：

您应该使用position: relative，因为负边距是不受欢迎的。将默认值设置为left: -100%，这意味着元素应该向左移动与宽度相同的量。对于 javascript，我们为脚本中的链接分配了一个点击处理程序，而不是内联。分配变量open=false，因为它在第一次加载时关闭，然后当我们打开它时，将变量分配给open=true。这会在不查询 dom 的情况下为元素提供状态。

var hidden = true;
var box = document.getElementById("box");
document.getElementById('toggle').onclick = function() {
    if(hidden) hidden = false, box.style.left = 0; 
    else hidden = true, box.style.left = '-100%';
}

#box {
    background: red;
    height: 50px;
    width: 50px;
    position: relative;
    left: -100%;
}

<a href="javascript:void(0)" id="toggle">
  <h3 id="contact">Contact</h3>
</a>
<div id="box"></div>

【讨论】：

联系方式