Efecto de desvanecimiento en Link Hover?

134

En muchos sitios, como http://www.clearleft.com , notará que cuando los enlaces se ciernen, se desvanecerán en un color diferente en lugar de cambiar de inmediato, la acción predeterminada.

Supongo que JavaScript se usa para crear este efecto, ¿alguien sabe cómo?

Miles Henrichs
fuente
1
Gracias. Ahora, entiendo cómo hacer enlaces de desplazamiento, es solo que estoy tratando de descubrir cómo crear un efecto más suave para mis enlaces de desplazamiento.
Miles Henrichs

Respuestas:

327

Hoy en día, las personas solo usan transiciones CSS3 porque es mucho más fácil que jugar con JS , el soporte del navegador es razonablemente bueno y es simplemente cosmético, por lo que no importa si no funciona.

Algo como esto hace el trabajo:

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

También puede hacer una transición de propiedades CSS específicas con diferentes tiempos y funciones de facilitación separando cada declaración con una coma, así:

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 aquí

Marcel
fuente
@AndreiCristof: ¡Por suerte funciona en IE10 ! No se requiere prefijo de proveedor tampoco (lo cual es extraño).
Marcel
Probé ambos y espero que si encuentro la razón correcta de que la forma CSS no es fluida y fluida como la forma jQuery. Por favor corrígeme si estoy equivocado.
QMaster
¡Tú Molas! Bien explicado, me ayudó mucho al verlo.
plast1K
Mi prueba es con una imagen, no un enlace.
Felipe
@FelipeMicaroniLalli mejor para publicar una pregunta, supongo, definitivamente parece un problema de sintaxis.
Marcel
9

Sé que en la pregunta que dice "Supongo que JavaScript se usa para crear este efecto", pero CSS también se puede usar, a continuación se muestra un ejemplo.

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>

¡Y aquí hay un JSFIDDLE para el código anterior!


Marcel en una de las respuestas señala que puede "hacer la transición de varias propiedades CSS", también puede usar "all" para efectuar el elemento con todos sus estilos: hover como a continuación.

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>

¡Y aquí hay un JSFIDDLE para el ejemplo de "todos"!

Jake
fuente
6

Puedes hacer esto con JQueryUI:

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

http://jsfiddle.net/dWCbk/

Niclas Sahlin
fuente
no necesitas jqueryui para eso, solo jquery
Juan
66
@Juan No, jQuery solo puede animar "valores numéricos únicos" cuyos colores no son (ver api.jquery.com/animate/#animation-properties ). Pero en realidad no necesita toda la biblioteca jQueryUI, solo el complemento jQuery.Color, que está incrustado en jQueryUI.
Niclas Sahlin
@Niclas Sahlin. Encontré tu violín buscando transiciones CSS. Su transición JQuery-UI es mucho más suave, estoy seguro de que los usuarios lo notarán.
RubyRube
1
Hay soluciones con css, que es mucho más fácil de implementar
mhenkel
2

Prueba esto en tu CSS:

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