jQuery imagen libración desvanecimiento de intercambio

Question

He estado buscando en línea para un rato, tratando de encontrar la mejor manera de escribir un script de jQuery que hace esta tarea sencilla: el canje de una imagen en vuelo estacionario con un elegante efecto de desvanecimiento. He encontrado muchas soluciones (de alguna manera a engorroso y torpe), y reducido a lo que veo como los dos mejores:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Para mis propósitos, yo quiero ser capaz para hacer este hover intercambiar varias veces en una página. La página es http://www.vitaminjdesign.com. En la actualidad, tengo suspendido mi "navegador de servicios" (diferente tipo de hover) pero quiero aplicarlo a todos los botones de navegación, así como a los íconos sociales en el pie de página. Todos los elementos flotantes serán los mismos: dos archivos de imagen, uno que se desvanece al otro al pasar el mouse y vuelven con permiso. ¿Cuál es la mejor manera de hacerlo? ¿Uno de los enlaces de arriba tal vez?

Answer 1

También podría lograr esto usando una sola imagen de fondo, y desapareciendo en & a una div transparente. Aquí está un ejemplo rápido, que podría extenderse a trabajar de forma automática para una sola clase de imagen:

$(document).ready(function() { 
    $("#mask-div") 
     .css({ 
      "position": "absolute", 
      "width": 275, 
      "height": 110, 
      "background": "rgba(255, 255, 255, 0.5)" 
     }) 
     .mouseover(function() { 
      $(this).fadeOut("slow"); 
     }) 
    ; 
    $("#test-img").mouseout(function() { 
     $("#mask-div").fadeIn("slow"); 
    }); 
}); 

Ejecución de demostración se puede ver en jsbin: demo-one

ACTUALIZACIÓN: Aquí es una solución más genérica (incompleto, pero muestra algunas ideas): demo-two. Simplemente agregue la clase "fade-img" a cualquier imagen que desee para tener este efecto.

$(document).ready(function() { 
    $(".fade-img") 
     .before("<div class='fade-div'></div>") 
     .each(function() { 
      var img = $(this); 
      var prev = img.prev(); 
      var pos = img.offset(); 

      prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
       .mouseover(function() { 
        $(this).fadeOut("slow"); 
       } 
      ); 
     }) 
     .mouseout(function() { 
      $(this).prev().fadeIn("slow"); 
     }) 
    ; 
}); 

Answer 2

dentro $(document).ready()

$('.imgbuttonclass').hover(function(){ 
    $(this).animate({ 
     backgroundImage: 'img2.png' 
    },500); 
},function(){ 
    $(this).stop(true).animate({ 
     backgroundImage: 'img1.png' 
    },500); 
}); 

edición

si solo deseas para hacer esto: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

a continuación, utilizar la respuesta de jthompson o simplemente utilizar el código de esa página. Si desea utilizar dos imágenes separadas, es posible que desee echar un vistazo a esto:

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

y la demo

lo que hace es

Se ve a través del documento para cualquier etiqueta "img" o "entrada" con una clase de "ro". La imagen de sustitución debe ser con el mismo nombre que la imagen normal pero con "_o" al final. Por ejemplo, la imagen de rollover para "image.gif" será "image_o.gif". Después de encontrar todos los etiquetas de imagen, el guión precarga todos las imágenes de sustitución y los anuncios de la “mouseover” y eventos “mouseout”.

Answer 3

Image Cross Fade Transition with jQuery explica algunas maneras de abordar este ..

Answer 4

opto por la solución en el segundo link que ya ha proporcionado. Es corto, limpio y simple.

• Cree dos <img> etiquetas
• la posición de uno exactamente sobre el otro (CSS con z-index)
• En vuelo estacionario se desvanecen la opacidad de la imagen con mayor z-index a 0
• Esto hace que sea transparente y que ver la imagen subyacente
• Cuando el cursor deja de fundir opacidad a 1 nuevamente.

Hecho

Answer 5

creo que este es el mejor método, ya que utiliza CSS Sprites para lograr el efecto. El tutorial y la demostración ilustran cómo lograr esto usando CSS3 y jQuery. Compruébelo usted mismo a continuación:

http://css-tricks.com/fade-image-within-sprite/