JQuery와 나는 JQuery와의 루프에도 나머지

Question

보기 전에 배의 코드 X 양의 한 라인을 통해 루프 각 루프 : 지금 당신은 아마 눈치 챘로

var fadeTime=500; 
css_id=0; 
$.each(my_array, function (i, d_U) { 
css_id++; 
an_v=d_U[1]; 
an_d=d_U[4]; 

do_c_function("id_344",true,true); 

$("#box_"+css_id).fadeIn(fadeTime,function(){ 

    //this stuff will happen once the fadein is complete 

    $("#box_"+css_id).animate({top: '-50px'},fadeTime,function(){ 

     //this stuff will happen once the animate is complete 

     alert("#box_"+css_id);//for debugging 

    });//end of animation 

    });//end of fadein 

});//end of each loop 

, 내가 만들려고 해요 루프는 루프가 실행될 때마다 css_id 변수와 ++; (1을 더함)을 사용하여 매번 다른 div에 애니메이션을 적용합니다.

다음 코드 중 하나가 실행되기 전에 css_id이 높은 값에 도달했습니다. 그래서 애니메이트 할 때, Jquery는 #box_1을 애니메이트 할 때 #box_210 애니메이션을 시도 할 것입니다.

css_id++; 행을 한 번 실행 한 다음 애니메이션 행을 실행하고 css_id++; 행을 다시 실행하는 방법이 있습니까? 등등.

두 애니메이션을 모두 호출하여 회선을 css_id++;에 넣으려고했으나 제대로 작동하지 않는 것으로 보입니다.

감사

Answer 1

귀하 애니메이션 콜백 함수 css_id 위에 마개를 형성하기 때문에, css_id이 변수는 애니메이션 루프가 생성되는 순간에 보유 단순히 값을 실시간 참조를 저장한다.

모든 매개 변수가 JavaScript로 전달되므로 jQuery의 데이터 함수를 사용하여 클로저를 해제하고 그 시점의 css_id 값의 스냅 샷을 만들 수 있습니다.

$("#box_"+css_id).data("css_id", css_id).fadeIn(fadeTime,function(){ 
     var local_css_id = $(this).data("css_id"); 
     $("#box_"+ local_css_id).animate({top: '-50px'},fadeTime,function(){ 

      //this stuff will happen once the animate is complete 

      alert("#box_" + local_css_id);//for debugging 
     });//end of animation 
     });//end of fadein  
    });//end of each loop 

Answer 2

문제의 범위는 css_id입니다. 루프를 수정하는 가장 쉬운 방법은 루프 내에서 함수를 호출하는 것입니다. 함수를 호출 할 때마다 함수 범위 내에서 변수가 증가하므로 변수는 변경되지 않습니다. 이 같은

뭔가 : 여기

function doTheAnimation(css_id) { 
    $("#box_" + css_id).fadeIn(fadeTime, function() { 

     //this stuff will happen once the fadein is complete 
     $("#box_" + css_id).animate({ 
      top: '-50px' 
     }, fadeTime, function() { 

      //this stuff will happen once the animate is complete 
      alert("#box_" + css_id); //for debugging 
     }); //end of animation 
    }); //end of fadein 
} 

var fadeTime = 500; 
css_id = 0; 
$.each(my_array, function(i, d_U) { 
    css_id++; 
    an_v = d_U[1]; 
    an_d = d_U[4]; 

    do_c_function("id_344", true, true); 

    doTheAnimation(css_id); 

}); //end of each loop 

그 차이를 설명하기 위해 바이올린입니다.

http://jsfiddle.net/kmGWa/

Answer 3

당신이 (이전 후 시작하는 다음 일 완료) 순서로 이동하기 위해 각각의 애니메이션을 원한다면, 당신은 각각의 로컬 기능과 최종 완료에서 수행되는 경우이처럼 코딩 할 수 있습니다 함수는 다음 함수를 다시 호출하기 위해 로컬 함수를 호출합니다.

function doFades() { 
    var fadeTime=500; 
    css_id=0; 
    var i = 0; 
    function doOneFade() { 
     if (i < my_array.length) { 
      var d_U = my_array[i++]; 
      css_id++; 
      an_v=d_U[1]; 
      an_d=d_U[4]; 

      do_c_function("id_344",true,true); 

      $("#box_"+css_id).fadeIn(fadeTime,function(){ 

       //this stuff will happen once the fadein is complete 

       $("#box_"+css_id).animate({top: '-50px'},fadeTime,function(){ 

        //this stuff will happen once the animate is complete 

        alert("#box_"+css_id);//for debugging 
        doOneFade(); 

       });//end of animation 

      });//end of fadein 
     } 
    } 
    doOneFade(); 
}