fadetransi.jpg

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

PLAIN TEXT
JavaScript:
<script src="js/jquery.js" type="text/javascript"></script>

    <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

PLAIN TEXT
CSS:
.fade {
  position: absolute;
  top: 100px
  left: 100px
}

.fade div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

Nuestra estructura

PLAIN TEXT
HTML:
<h2> Tecnica jQuery</h2>
<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

PLAIN TEXT
CSS:
img.fade {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}

img.fade:hover {
  opacity: 0;
}

PLAIN TEXT
HTML:
<h2> Tecnica CSS</h2>
      <span style="position: relative;">
    <img src="2.jpg" />
    <img
      style="position: absolute; left: 0px;"
      src="1.jpg" class="fade" />
</span>