배열을 반복하여 배경색을 바꿉니다.

Question

페이지에 연한 파란색 배경이있는 컨테이너가 있습니다. 각 배경을 순차적으로 더 어둡게 보이게하고 싶습니다. 이 시점에서, 나는 행복하게 나의 색 배열을 수동으로 설정하고있다. (우리는 다른 날을 위해 그 질문을 떠날 것이다.)하지만 배경색을 바꾸거나 배열을 반복 할 수 없다.

현재 배경색을 파싱하는 중에 오류가 발생했다는 경고가 나타납니다. 나는 CSS 문서에서 .content에 대한 배경색을 설정하고 제거하려고 시도했지만 어느 방법으로도 작동하지 않는다. (제거하지 않으면 배경색이 전혀 없다.)

코드 I 지금까지 가지고있다. 내가 부족이에 대한 확실한 해결책이 http://jsfiddle.net/arunpjohny/3eGM5/

$(document).ready(function() { 
var blues = ['#c4c4fd', '#5d5dbc'], 
    counter = 0; 

$(".content").click(function() { 

    $(".content").animate({ 
     backgroundColor: blues[counter++]}); 


#the text in this div also changes on click, so here's my animation for that. 
#This is working fine, but I figured I'd include it just to be safe 


    var current = $('.active'); 
     var next = current.next('.section'); 

     if(next.length === 0) { 
      next = $('.section').first(); 
     }; 

     current.fadeOut(400).removeClass('active'); 
     next.delay(100).fadeIn(1500).addClass('active'); 
    }); 

}); 

있습니까 : 그것은 완전히 일치하지 않는하지만 나는 다른 스레드에서이 jsfiddle에 기반을 구축? 나는 여전히 jQuery에 익숙하지 않고 모든 것을 함께 사용하기 때문에 조언이나 어떤 방향으로 나를 가리켜 주면 대단히 감사하겠습니다!

Answer 1

색을 애니메이션으로 적용하려면 jQuery Color plugin을 사용해야하므로 색이 움직이지 않습니다.

마크 업에 jquery 색상 플러그인을 포함시킨 다음 애니메이션 코드를 이와 유사하게 변경해야합니다.

$("#block").animate({ 
     backgroundColor: $.Color(blues[counter++]) 
}, 1500);