如何在javascript中使div左转然后右转？ （没有jQuery）

Question

这应该很简单，但我想没有jQuery让它有点困难 我想重复一个过程，其中div向右移动100px（带动画）然后向左移动100px（所以我想要连续移动）。
似乎有很多jQuery答案这个问题，但没有纯粹的JavaScript解决方案。我可能错过了一些明显的东西，但我找不到它。
这是代码：

var left = 0;
var id = setInterval(function(){goRight()}, 10);
var ed = setInterval(function(){goLeft()}, 10);

function goRight(){
    var redpixel = document.getElementById("redpixel");
    left++;
    redpixel.style.left = left + "px";
    if (left>100) {
        clearInterval(id)
        goLeft();
    }
}

function goLeft(){
    var redpixel = document.getElementById("redpixel");
    left-=1;
    redpixel.style.left = left + "px";
    if (left<100) {
        clearInterval(ed);
        goRight()
    }
}

HTML：

    <button onclick="goRight()">Go Right</button>
    <div id="redpixel"></div>

CSS：

.container {
    width: 480px;
    height: 800px;
    border: 1px solid black;
}

#redpixel {
    position: absolute;
    top: 200px;
    left: 0;
    background: red;
    width: 25px;
    height: 25px;
}

最后评论：

1. 动画开始时我没有调用任何功能（不使用按钮），这怎么可能？
2. 动画可以正常工作，但在达到前100px时会停止。
3. （附加问题） - 如果我把var redpixel放在功能之外它根本不起作用，为什么？
   

所有帮助表示感谢，谢谢！

Answer 1

您的代码存在的问题是您同时设置左右动画，而左侧动画会立即清除，因为left<100。固定代码：

var left = 0,
    id = setInterval(goRight, 10); 
    ed;

function goRight() {
    var redpixel = document.getElementById("redpixel");
    left++;
    redpixel.style.left = left + "px";
    if (left > 100) {
        clearInterval(id);
        ed = setInterval(goLeft, 10);
    }
}

function goLeft() {
    var redpixel = document.getElementById("redpixel");
    left -= 1;
    redpixel.style.left = left + "px";
    if (left < 1) {
        clearInterval(ed);
        id = setInterval(goRight, 10);
    }
}

#redpixel {
    position: absolute;
    top: 50px;
    left: 0;
    background: red;
    width: 25px;
    height: 25px;
}

<div id="redpixel"></div>

另外一点，正如Adjit所证明的那样，将CSS方法视为更简单，更有效是非常有意义的。

Answer 2

实际上你根本不需要任何JavaScript，而且使用CSS3非常简单。

只需要像这样设置关键帧和动画:(显然包括必要的浏览器兼容性）

#box {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
    animation: waver 2s infinite;
    -webkit-animation: waver 2s infinite;
}
@keyframes waver {
    0% {left: 0px;}
    50% {left: 100px;}
    100% {left: 0px;}
}

@-webkit-keyframes waver {
    0% {left: 0px;}
    50% {left: 100px;}
    100% {left: 0px;}
}

请参阅此小提琴以获取示例：http://jsfiddle.net/bwsd3eoy/