for 루프를 사용한 시차 효과

시차를 둔 애니메이션을 만드는 데 문제가 있습니다. 배열 ("상자")에서 10ms마다 다른 요소를 지연시키면서 요소를 애니메이션하려고 시도했습니다. 그러나 setTimeout과 함께 작동하지 않습니다. "i"값은 시간 초과가 끝난 후에 추가됩니다. 수행 방법 ?for 루프를 사용한 시차 효과

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
    }

어떤 도움이나 조언이 apprecaited되고, 사전에 감사합니다.

출처

2016-11-15 Matija

대답이의 setTimeout이 실행되는 시점에서 i의 프리미티브 값에 고정하는 인생을 사용하는 것입니다.

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     (function (i) { 
      setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
     }(i)) // This copies the value. 
    }

출처

2016-11-15 14:14:33 Brian

이, 내가 – Matija

@Matija 당신은 당신이 무엇을하고 너무 빨리 있는지 내가 100'을 * '와 같은 큰 값을 시도 왜 아무 생각이 한 번에 모든 요소를 이동? - 두 개의 고리에서'i'를 사용했다는 것이 나에게 일어났습니다. 어쩌면 하나를'j'로 변경할 수 있습니다. – Brian

옙 나는 심지어 1000을 시도했다. 콘솔에 "i"를 기록했고 0에서 49까지 숫자를 얻었다. 상자 배열에 50 개의 요소가있다. – Matija

이 코드를 훨씬 청소기과 같이 할 수 있습니다 :

var boxes = document.getElementsByClassName('box'); 

    for (var i = 0; i < boxes.length; i++) { 
     (function (i) { 
      setTimeout(function() {boxes[i].style.transform="translateX(150px)"},i*200) 
     }(i)) // This copies the value. 
    }

당신이 그들에 액세스하는 배열로 밀어 필요 없어요. 여기

는 작업 바이올린입니다 : https://jsfiddle.net/w8wbmozs/52/

출처

2016-11-15 14:13:45

for 루프를 사용한 시차 효과

답변

관련 문제