스크립트 질문드립니다.

function vision_fade(){

var new_arr = ["stage","light","title","text01","circle02","text02","circle01","text03"];

setTimeout(function(){$("div#vision img#"+new_arr[0]).fadeIn(500)}, 1200);

setTimeout(function(){$("div#vision img#"+new_arr[1]).fadeIn(500)}, 1700);

setTimeout(function(){$("div#vision img#"+new_arr[2]).fadeIn(500)}, 2200);

setTimeout(function(){$("div#vision img#"+new_arr[3]).fadeIn(500)}, 2700);

setTimeout(function(){$("div#vision img#"+new_arr[4]).fadeIn(500)}, 3200);

setTimeout(function(){$("div#vision img#"+new_arr[5]).fadeIn(500)}, 3700);

setTimeout(function(){$("div#vision img#"+new_arr[6]).fadeIn(500)}, 4200);

setTimeout(function(){$("div#vision img#"+new_arr[7]).fadeIn(500)}, 4700);

}

순차적으로 이미지들이 나오도록 코딩을 위처럼 하니 잘 나옵니다.

하지만 위 구문을 for문으로 변경해서..

function vision_fade(){

var new_arr = ["stage","light","title","text01","circle01","text02","circle02","text03"];

for (var i=0; i<new_arr.length; i++){

setTimeout(function(){$("div#vision img#"+new_arr[i]).fadeIn(500)}, parseInt(i*500)+1200);

}

이렇게 하니 작동이 되질 않습니다.

제가 뭔가 실수한 게 있는 걸까요? 흠..