Javascript：嵌套循環？

我想達到的動畫/序列是這樣的：然後再次Javascript：嵌套循環？

動畫與循環開始（想象一個車從X1到X2移動），然後在1秒的暫停動畫（想象一個車從X2到X3等）

的車循環，實現增加1px的於汽車移動左：值

，但我不能弄清楚嵌套循環應該如何工作

我試圖僅用setInterval的，沒有jQuery的

UPDATE做TI：對不起，我不是明確

，但假設我們有

var animation = setInterval(car_moves, 10);

我如何觸發這個動畫的每2秒，動畫應該持續0.5秒？

來源

2012-02-02 Francesco

你使用jQuery嗎？ – Cheery 2012-02-02 05:53:57

'汽車循環，如果例如實現在汽車左側添加1px：值'你可以解釋這是什麼意思？ – Ved 2012-02-02 05:54:48

如果您想要一個提示，請查看使用while循環。這將允許您運行動畫，直到汽車駛過指定的距離。 – 2012-02-02 05:55:20

看，這是與jQuery http://jsfiddle.net/qCx69/

$('img').animate({left: '100px'}, 2000, function() { 
    $(this).delay(1000).animate({left: '300px'}, 2000); 
});

與

<img src='http://boydstire.com/img/car_img.jpg' id='car' 
    style='position:absolute;left:0px;top:100px;'>

或沒有它相互作用（這一個不是優化的解決方案） http://jsfiddle.net/8bZTA/1/

var timer = setInterval(function(){ 
    update_car(100,1); 
}, 50); 

function update_car(x,path) 
{ 
    var car = document.getElementById('car'), 
     pos = parseInt(car.style.left) + 1; 
    car.style.left = pos + 'px'; 
    if (pos > x) 
    { 
     clearInterval(timer); 
     if (path!=2) 
     { 
     setTimeout(function(){ //pause 
     timer = setInterval(function(){update_car(200,2);}, 50);} 
      , 5000); 
     } 
    } 
}

完成更新：

你甚至可以制定一套停止和運動（它可以爲變速更新太） http://jsfiddle.net/hFH4U/5/

var timer = setInterval(function(){update_car();}, 50); 

var path = {'path1': 100, 'pause1': 2000, 'path2': 200, 
       'pause2': 2000, 'path3': 220}, 
       cur_step = 0, steps = [], speed = 1; 
for (var i in path) steps.push(i); 

function update_car() 
{ 
    var car = document.getElementById('car'), 
     pos = parseInt(car.style.left); 
    if (/^path/.test(steps[cur_step])) 
    { 
     // motion part 
     if (pos > path[steps[cur_step]]) 
      cur_step++; 
    } 
    if (/^pause/.test(steps[cur_step])) 
    { 
     clearTimeout(timer); 
     setTimeout(function(){ 
     cur_step++; 
     timer = setInterval(function(){ update_car(); }, 50); 
     }, path[steps[cur_step]]); 
    } 
    if (cur_step >= steps.length) // end animation 
     clearInterval(timer); 

    car.style.left = (pos + speed) + 'px'; 
}

來源

2012-02-02 05:57:52 Cheery

「是的，但我寧願看到它在純javascirpt是如何工作的無延遲（）」閱讀評論... – 2012-02-02 06:00:35

是正確的，但我不能在我的情況 – Francesco 2012-02-02 06:11:36

@Francesco好使用jquery，我寫信給你另一個例子 – Cheery 2012-02-02 06:14:06

而不是寫一個傳統的循環，你應該看一看的setTimeout和setInterval 。這些調用的第一個參數是一個函數，您可以繪製汽車或移動汽車。

來源

2012-02-02 05:57:54 AustinDahl

您不需要嵌套循環。你可以使用像setInterval這樣的東西來實現這一點。請記住，我使用jQuery通過id獲取目標元素。

var interval = setInterval(IncreasePosition, 1000); // 1000 is in milliseconds 
function IncreasePosition() { 
    var targetElement = $("#targetElementId"); 
    // TODO: Get current padding value 
    // TODO: Increment to it 
}

這種方法（IncreasePosition）將調用每一秒，增加填充。

來源

2012-02-02 06:00:02 StephenPAdams

是的，但有了這個，你有一個突然的過渡，我想在每個像素之間保持10ms – Francesco 2012-02-02 06:09:44

編輯：這裏是直線上升的JavaScript/HTML/CSS ...所有你需要的是一個合適的car.jpg文件...

<!DOCTYPE html> 
<html> 
<head> 
<title>Hi</title> 
<style> 
#car { 
    position: absolute; 
    left: 0px; 
} 
</style> 
<script type="text/javascript"> 
var last_x = 0; 
var some_arbitrary_stopping_point = 200; 
var x = self.setInterval("move()", 100); 

function move() 
{ 
    last_x += 5; 
    document.getElementById('car').style.left = last_x + 'px'; 
    check_pos_car(); 
    return last_x; 
} 

function check_pos_car() 
{ 
    if (last_x > some_arbitrary_stopping_point) 
    { 
     x = window.clearInterval(x); 
    } 
} 


</script> 
</head> 
<body> 
<img src="car.jpg" id="car" alt="A beetle"> 
</body> 
</html>

來源

2012-02-02 06:12:21 chucksmash

這段代碼已經過測試，完成了你所要求的。如果沒有整個樣式表，並且在'move（）'中的'check_pos_car（）'中，當然也可以做得很好，當然也是 – chucksmash 2012-02-02 06:37:44

演示：http://jsfiddle.net/MattLo/BVEmF/1/

一種面向對象的方法：

// example showing linear movement 
function car() { 
    this.car = document.getElementById("car"); 
    this.style = this.car.style; 
    this.delay = 2000; // 2 secs 
    this.position = 0; 
} 

car.prototype.moveBy = function(m) { 
    var me = this; 
    setTimeout(function() { 
     me.animate(m); 
    },this.delay) 
} 

car.prototype.animate = function(m) { 
    var me = this, i=0, 
    r = setInterval(function() { 
     ++i; 
     me._move(i); 
     if(i === m) { 
     me.position += i; 
     // stop animation 
     clearInterval(r); 
     // delay again 
     me.moveBy(m); 
     } 
    },77); 
} 

car.prototype._move = function(i) { 
    this.style.marginLeft = i+this.position+"px"; 
} 

Car = new car; 
Car.moveBy(20);

來源

2012-02-02 06:23:41

！ – Francesco 2012-02-02 16:44:29

Javascript：嵌套循環？

回答

相關問題