En jqueryfordesigners podremos ver diversas técnicas para lograr fundidos mientras vamos generando transiciones entre una y otra imagen. Es un efecto sencillo pero que puede dar un estilo agradable a nuestros proyectos. Se puede lograr de una forma muy simple con CSS o mediante JavaScript, con una imagen que al posar el ratón sobre ella genere la transición y luego de haber dejado nuestro ratón vuelva lentamente a la imagen original con un desvanecimiento muy suave.
Ver Demo - Descarga Ejemplo - Mas info jqueryfordesigners - Mas demos 1, 2, 3
Tecnica con jQuery
En nuestro encabezado
<script type="text/javascript">
<!--
$(function () {
// find the div.fade elements and hook the hover event
$('div.fade').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(250);
}
}, function () {
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
fade.fadeOut(3000);
}
});
});
//-->
</script>
Un poco de CSS
position: absolute;
top: 100px
left: 100px
}
.fade div {
position: absolute;
top: 0;
left: 0;
display: none;
}
Nuestra estructura
<div class="fade">
<a href="http://xyberneticos.com/"><img src="1.jpg" /></a>
<div>
<a href="http://xyberneticos.com/"><img src="2.jpg" /></a>
</div>
</div>
TECNICA con CSS
opacity: 1;
-webkit-transition: opacity 1s linear;
}
img.fade:hover {
opacity: 0;
}
<span style="position: relative;">
<img src="2.jpg" />
<img
style="position: absolute; left: 0px;"
src="1.jpg" class="fade" />
</span>
Loading ...
Mia Tyler
21-04-2008
Permalink
Hi there...Man i love reading your blog, interesting posts ! it was a great Sunday .
Esteban Presa
21-04-2008
Permalink
Hola! bueno ya que es la primera vez que posteo aprovecho para felicitarte por el blog, soy un lector diario...
Con el tema del thread queria decir/preguntar por la tecnica con css...
El uso del webkit no nos anda en todos los exploradores... y por lo tanto nos quedara como un hover de la imagen, solo lo veremos bien en safari que tiene el webkit...
Seria lo mismo con que los bordes redondeados que tiene mozila para el css...
En fin saludos !!
Gracias por entretenernos todos los días y ayudarnos
Gerangel
21-04-2008
Permalink
Hola nikko tiene un bug, porq no anda en ningún otro explorador q no sea Mozilla!
Un saludo!
Gabriel
21-04-2008
Permalink
Alguna idea de algun script que haga exactamente lo mismo pero con mootools ?
ivanzv
21-04-2008
Permalink
No se si les haya pasado que de repente se congela el script. Simplemente cambias a una de las imagenes y no hace el 'fade'... si te situas en otra imagen entonces ya funciona, pero vuelve a fallar nuevamente...
Alguien sabe por que pase esto?