Efek Fade pada Link Hover?


134

di banyak situs, seperti http://www.clearleft.com , Anda akan melihat bahwa ketika tautan melayang, mereka akan memudar menjadi warna yang berbeda sebagai lawan untuk segera beralih, tindakan default.

Saya menganggap JavaScript digunakan untuk membuat efek ini, apakah ada yang tahu caranya?


1
Terima kasih. Sekarang, saya mengerti cara membuat tautan melayang, hanya saja saya mencoba mencari cara untuk membuat efek yang lebih halus untuk tautan melayang saya.
Miles Henrichs

Jawaban:


327

Saat ini orang hanya menggunakan transisi CSS3 karena jauh lebih mudah daripada mengacaukan JS , dukungan browser cukup baik dan itu hanya kosmetik sehingga tidak masalah jika tidak berfungsi.

Sesuatu seperti ini menyelesaikan pekerjaan:

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

Anda juga dapat mentransisikan properti CSS tertentu dengan berbagai timing dan fungsi pelonggaran dengan memisahkan setiap deklarasi dengan koma, seperti:

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 di sini


@AndreiCristof: Untungnya bekerja di IE10 ! Tidak ada awalan vendor yang diperlukan (yang aneh).
Marcel

Saya menguji keduanya dan saya harap jika saya menemukan alasan yang benar bahwa cara CSS tidak lancar dan lancar sebagai cara jQuery. Harap perbaiki saya jika saya salah.
QMaster

Kamu keren! Dijelaskan dengan baik, banyak membantu saya dengan melihatnya.
plast1K

Tes saya dengan gambar, bukan tautan.
Felipe

@FelipeMicaroniLalli terbaik untuk mengirim pertanyaan saya kira, pasti terdengar seperti masalah sintaksis.
Marcel

9

Saya tahu dalam pertanyaan Anda menyatakan "Saya berasumsi JavaScript digunakan untuk membuat efek ini" tetapi CSS juga dapat digunakan, contohnya adalah di bawah ini.

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>

Dan inilah JSFIDDLE untuk kode di atas!


Marcel dalam salah satu jawaban menunjukkan Anda dapat "transisi beberapa properti CSS" Anda juga dapat menggunakan "semua" untuk mempengaruhi elemen dengan semua Anda: gaya hover seperti di bawah ini.

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>

Dan di sini adalah JSFIDDLE untuk contoh "semua"!


6

Anda dapat melakukan ini dengan JQueryUI:

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

http://jsfiddle.net/dWCbk/


Anda tidak perlu jqueryui untuk itu, hanya jquery
Juan

6
@Juan Tidak, jQuery hanya dapat menghidupkan "nilai numerik tunggal" yang warnanya tidak (lihat api.jquery.com/animate/#animation-properties ). Tetapi Anda sebenarnya tidak membutuhkan seluruh pustaka jQueryUI, hanya plugin jQuery.Color, yang kebetulan tertanam di jQueryUI.
Niclas Sahlin

@ Niclas Sahlin. Saya menemukan biola Anda sedang mencari transisi CSS. Transisi JQuery-UI Anda jauh lebih lancar, saya yakin para pengguna akan melihatnya.
RubyRube

1
Ada solusi dengan css, yang jauh lebih mudah diimplementasikan
mhenkel

2

Coba ini di css Anda:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.