링크 색상의 페이드 효과

$('a').hover(function(){ 
    $(this).stop(); 
    $(this).animate({ 
     color: '#22373A' 
    }, 'slow'); 
}, function(){ 
    $(this).stop(); 
    $(this).animate({ 
     color: '#fe57a1' 
    }, 'slow'); 
});

호 호버링 할 때 요소의 불투명도를 변경하려면이 방법을 사용하지만 색상 변경에는 효과가없는 것처럼 보입니다. 어떤 아이디어 또는 제안?링크 색상의 페이드 효과

관련 dennym documentation으로 당

출처

2012-02-14 Denny Mueller

http://api.jquery.com/animate/ 1 항 * * ...하지만 배경색은 jQuery.Color() 플러그인을 사용하지 않는 한 불가능합니다. * – Yoshi

yoshi 님, 도움이 되었어요. 마침내 전환으로 전환했습니다. :) –

대신 CSS 전환 사용을 고려 했습니까?

HTML :

<a href="#">foo</a> 
<a href=#>bar</a>

CSS :

html { 
    font: 2em/1.5 sans-serif; 
} 

a { 
    color: #22373a; 
    -webkit-transition: color 1s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: color 1s ease-out; /* Firefox 4+ */ 
    -ms-transition: color 1s ease-out; /* IE10+ */ 
    -o-transition: color 1s ease-out; /* Opera 10.5+ */ 
    transition: color 1s ease-out; 
} 

a:hover, a:focus { 
    color: #fe57a1; 
}

데모 : * 애니메이션 속성 및 값 이후 http://jsfiddle.net/HTDSJ/

출처

2012-02-14 19:56:42 Sharon

이미 완료했습니다. 감사합니다. –

, 나는 animate와 color 일을 생각하지 않습니다. 색상 이론에 익숙한 지 잘 모르겠지만 컬러 휠의 한 지점에서 다른 지점으로 이동하는 방법은 여러 가지가 있습니다. 다음 지점으로 곧장 가야합니까? 동심원 타원을 다음 지점으로 이동해야합니까? (작업 할 확률이 50 %에 불과합니다)? 선형 극좌표 함수를 따라 이동해야합니까? 너무 모호해서 그 이유 때문에 그들은 그것을 구현하지 않기로 결정했다고 생각합니다. 그러나 jQuery plugin for this이 있습니다.

출처

2012-02-14 19:04:47

Usin g 전환 이제, 긴 여행 조언을 주셔서 감사합니다 :) –

@DennyMueller, CSS 3? –

예, 자바 스크립트보다 훨씬 쉽고 가볍습니다. –

링크 색상의 페이드 효과

답변

관련 문제