如何讓div向左走，然後在javascript？ （沒有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/