링크 호버에 페이드 효과?

http://www.clearleft.com 과 같은 많은 사이트 에서 링크를 가리키면 기본 동작 인 즉시 전환하는 것과 달리 다른 색상으로 페이드 인됩니다.

JavaScript를 사용 하여이 효과를내는 것으로 가정합니다. 아는 사람이 있습니까?

요즘 사람들은 CSS3 전환을 사용하고 있습니다 .JS를 엉망으로 만드는 것보다 훨씬 쉽기 때문 입니다 . 브라우저 지원은 합리적으로 좋으며 장식 일뿐이므로 작동하지 않더라도 중요하지 않습니다.

이와 같은 작업이 완료됩니다.

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

다음과 같이 각 선언을 쉼표로 구분하여 다른 타이밍 및 여유 함수로 특정 CSS 속성을 전환 할 수도 있습니다.

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

여기 데모

나는 당신이 "이 효과를 만드는 데 JavaScript가 사용된다고 가정합니다"라는 질문에서 알고 있지만 CSS도 사용할 수 있습니다. 예는 다음과 같습니다.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

그리고 위 코드에 대한 JSFIDDLE 이 있습니다!

답변 중 하나에 Marcel은 "여러 CSS 속성을 전환"할 수 있다고 지적하고 "all"을 사용하여 아래처럼 모든 : hover 스타일로 요소에 영향을 줄 수도 있습니다.

CSS

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

그리고 "all"예제를위한 JSFIDDLE 이 있습니다!

JQueryUI를 사용하여이를 수행 할 수 있습니다.

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

CSS에서 이것을 시도하십시오 :

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}