[Dev's]순차적으로 애니메이션 동작 시키기

로또 번호들을 그냥 출력하고 있는데, 이걸 좀 역동적으로 나타낼 방법을 찾아보다가,

로또번호를 순차적으로 롤링시킨 뒤 출력하면 좋겠다는 생각이 들었다.

 

 

애니메이션을 순차적으로 적용하는 방법을 찾다보니,

queue 라는 함수가 있었고, 요걸 잘 활용해보았다.

 

	$('#num1').stop().animate({val : 45},{
            duration:500,  //시간
            step: function() {
            	$('#num1').text(Math.ceil(this.val));
        	  },
        	  complete: function() {
        		$('#num1').text(Math.ceil(data[0]));
        		this.val = null;
        	  }
        }).queue(function () {
        	$('#num2').stop().animate({val : 45},{
                duration:500,  //시간
                step: function() {
                	$('#num2').text(Math.ceil(this.val));
            	  },
            	  complete: function() {
            		$('#num2').text(Math.ceil(data[1]));
            		this.val = null;
            	  }
            })

 

애니메이션을 추가 했는데, 이게 한번만 돌더니, 그 다음부터는 동작을 안하는 문제가 있었다.

여러 예시나 구글링을 찾아봤지만 해결하는 방법을 찾지 못했는데,

clearQueue(); 함수를 써보니까, 이번에는 반복은 되는데, 애니메이션이 적용이 안되었다.

 

그래서 코드를 유심하게봤는데,

이 애니메이션이라는것 자체가

"0~목표치" 까지 animate 시키는 함수인데,

 

한번 돌고, "목표치" 까지 가버리면, 이 값을 다시 초기화 해줄 필요가 있는것이다.

즉 45까지 이미 목표치에 도달한 상태에선 다시 애니메이션이 동작하지 않는것이 당연했다.

여기서 목표치는 45까지로 설정되어 있지만, 

 

step에서 45까지 도달 시킨 뒤, complete 에서 추출된 로또번호로 다시 고쳐넣게 된다.

그리고, 목표치를 다시 null 초기화 하는걸로 문제를 해결했다.

 

간혹, CSS를 애니메이션 적용하는 경우도 마찬가지로

left를 200이동 시키는 애니메이션을 1회 동작 시킨 뒤, 2번째 동작을 명령하면

이 애니메이션은 동작하지 않는다.

 

이유는 간단하다.

이미 200의 위치에 있으니까!

 

생각해보면 간단한 문제였는데.... 시간을 많이 뺏겨버렸네 = _=;;;