jQuery를 컬러 애니메이션

Question

내가 애니메이션을 원하지 않는 기능이 붙어있어 ... 나는 컬러 애니메이션을 사용하려면 최신 jQuery Color Plugin을 사용하고

. 다음 코드에서 일어날 일은 (당연히 작동 할 때) :

(1) 사용자가 그 색상의 RGB 값을 기준으로 (2)의 색상을 선택하면 더 밝은 그늘을 만듭니다. 링크를 이동할 때 그 색이 링크 가리키면 경우 (3) 그것의 색상이 새로 계산 된 컬러로 대체된다 (4) 원래의 색상에 애니메이션한다.

색 교체 작업 절대적 괜찮 았지만 애니메이션은 현재 jQuery로 800msec 이상 수행 한 것보다 전통적인 CSS 호버 효과와 비슷합니다.

닌자가 나를 도울 수 있다면, 나는 당신의 던지는 별을 일주일 동안 빛낼 기꺼이 더 많을 것입니다 :). 코드는 다음과 같습니다.

$('a').hover(function() { 
//code when hover over 
$oldColour = $(this).css('color'); 

    $(this).animate({'color': $(this).css('color', function(i, v){ 
     var rgb = getRGB($(this).css('color')); 

     for(var i = 0; i < rgb.length; i++){ 
     rgb[i] = (rgb[i] + 60 < 255) ? rgb[i] + 60 : 255; 
     } 

     var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
     return newColor; 

     }) //end anonymous function 
    }, 800); //end animate 


    }, function() { 
     //code when hovering away 
     $(this).animate({'color': $(this).css('color', $oldColour)}, 800); 
    }); 

귀하의 도움은 언제나 대단하고 대단합니다. 는 ...보고 :

PS가 demo page에 가서 어떤 링크 위에 마우스를 올려 라이브 예를 보려면을내어 (물론,와 여자)

===== UPDATE를 통 더 감사합니다 그리고 more 도움이 필요합니다. ===== Cambraca의 코드는 완벽하게 작동합니다. IE에서 그것은 매우 어두운 색으로 페이드되고 나서 마우스를 떼면 초기 색으로 되돌아 간다. 다시 마우스를 가져 가면 정확한 재 계산 된 색이 표시된다.

IE에서 이것을 해결 하시겠습니까?

Answer 1

이

var $oldColour; 

$('a').hover(function() { 
    //code when hover over 
    $oldColour = $(this).css('color'); 
    var rgb = getRGB($(this).css('color')); 
    for (var i = 0; i < rgb.length; i++) 
     rgb[i] = Math.min(rgb[i] + 60, 255); 
    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
    $(this).animate({'color': newColor}, 800); 
}, function() { 
    //code when hovering away 
    $(this).animate({'color': $oldColour}, 800); 
});