Hiệu ứng mờ dần trên liên kết Hover?

trên nhiều trang web, chẳng hạn như http://www.clearleft.com , bạn sẽ nhận thấy rằng khi các liên kết được di chuột qua, chúng sẽ mờ dần thành một màu khác thay vì chuyển đổi ngay lập tức, hành động mặc định.

Tôi giả sử JavaScript được sử dụng để tạo hiệu ứng này, có ai biết làm thế nào không?

Ngày nay mọi người chỉ sử dụng các chuyển đổi CSS3 vì nó dễ dàng hơn nhiều so với việc sử dụng JS , hỗ trợ trình duyệt khá tốt và nó chỉ đơn thuần là mỹ phẩm nên không thành vấn đề nếu nó không hoạt động.

Một cái gì đó như thế này hoàn thành công việc:

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; }

Bạn cũng có thể chuyển đổi các thuộc tính CSS cụ thể với các thời gian và chức năng nới lỏng khác nhau bằng cách tách từng khai báo bằng dấu phẩy, như vậy:

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; }

Demo tại đây

Tôi biết trong câu hỏi bạn nêu "Tôi giả sử JavaScript được sử dụng để tạo hiệu ứng này" nhưng CSS cũng có thể được sử dụng, một ví dụ dưới đây.

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>

Và đây là một JSFIDDLE cho đoạn mã trên!

Marcel trong một trong những câu trả lời chỉ ra rằng bạn có thể "chuyển đổi nhiều thuộc tính CSS", bạn cũng có thể sử dụng "tất cả" để tạo hiệu ứng cho phần tử với tất cả các kiểu: di chuột như bên dưới.

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>

Và đây là một JSFIDDLE cho ví dụ "tất cả"!

Bạn có thể làm điều này với JQueryUI:

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

http://jsfiddle.net/dWCbk/

Hãy thử điều này trong css của bạn:

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