jQuery 컬러 애니메이션의 로딩 시간 단축

Question

각 스팬을 3 초 간격으로 임의의 색상으로 회전하려고합니다.

JSFiddle : http://jsfiddle.net/WERFJ/21/

<h1><span class="first">TEXT1</span> <span class="second">TEXT2</span> <span class="third">TEXT3</span></h1> 

가 현재 나는 아래의 코드와 jquery.animate-colors 플러그인을 사용하고 있습니다. 이 방법을 실행하거나 동일한 효과를 더 빨리 얻을 수있는 방법이 있습니까? Chrome이 처리 할 수 ​​있지만 FF가 자주 중단됩니다. 감사!

$(document).ready(function() { 
     spectrum(); 

      function spectrum(){ 
       var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
       var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')'; 
       var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')'; 

       $('.first').animate({ color: hue1 }, 3000); 
       $('.second').animate({ color: hue2 }, 3000); 
       $('.third').animate({ color: hue3 }, 3000); 
       spectrum(); 
     } 
    }); 

Answer 1

저는 재귀 호출이 애니메이션이 끝나기를 기다리지 않는다고 생각합니다. 마지막 애니메이션 호출에 대한 콜백으로서 호출을 추가함으로써 큐잉과 무한대의 애니메이션 체인 대신 마지막 호출이 완료 될 때만 호출 할 수 있습니다. http://jsfiddle.net/WERFJ/23/는 함수가 실행 완료 될 때까지 브라우저가 디스플레이를 업데이트하지 않기 때문에 사용자의 관점에서 초기 지연은 이제 파이어 폭스에서

$(document).ready(function() { 
    spectrum(); 

    function spectrum() { 
     var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
     var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')'; 
     var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')'; 

     $('.first').animate({ 
      color: hue1 
     }, 3000); 
     $('.second').animate({ 
      color: hue2 
     }, 3000); 
     $('.third').animate({ 
      color: hue3 
     }, 3000, spectrum); 
    } 
});​ 

Answer 2

를 잘 작동하는 것 같다,하지만 기능은 반복적으로까지 자신을 호출 유지 스택 오버플로가 있습니다. FF에서는 "너무 많은 재귀"오류가 있습니다. "너무 많은 재귀"오류로 인해 대기중인 모든 애니메이션이 실제로 작동하기 시작하는 함수가 충돌 한 후에 만 ​​발생합니다.

당신은 다른 전화 번호를 대기열에 setTimeout()를 사용하는 함수의 마지막 줄을 변경보다는 직접 자신을 호출함으로써이 문제를 피할 수 있습니다

:

setTimeout(spectrum,3100); 

http://jsfiddle.net/WERFJ/24/

Answer 3

사용 $.when는 애니메이션을 포장 , 다음 시리즈를 실행하려면 then(). jQuery를 연기 객체는 모든 애니메이션을 통해 시작하기 전에 완료되었는지 보장 다시

DEMO : http://jsfiddle.net/WERFJ/26/

var anim_1 = $('.first').animate({ color: hue1}, 3000); 
var anim_2 = $('.second').animate({color: hue2}, 3000); 
var anim_3 = $('.third').animate({color: hue3}, 3000); 

$.when(anim_1, anim_2, anim_3).then(spectrum);