Cambio de imagen en hover, efecto fadeIn

sirchote · #1 (**permalink**) 18/12/2013, 07:51

Saludos!

Quiero hacer un pequeño efecto con un cambio de imagen a través de javascript. En principio el siguiente código me funciona, pero me da algúnos problemas:
En firefox, no se cambia la imagen, ésta simplemente parpadea haciendo el efecto de fadeIn y fadeOut.
Y el problema más grande, es que la transición es muy lenta (en el resto de navegadores que funciona). Queda demasiado rato la zona sin ninguna imagen mostrada. He mirado la documentación, y en principio con un valor de "1", tendría que hacer un cambio rapidisimo. Es posible que esté afectando el .load?

Gracias de antemano!

Os pongo el código que estoy utilizando

Código:

function h_gourmet() {
  $("#img_gourmet").fadeOut("1",function() { 
  $(this).attr("src", "img/gourmet_hover.jpg");
  $(this).load(function() { $(this).fadeIn("1"); }); 
   
});

Código HTML:

<div id="carousel">
	<ul>
	 <li class="mask">			
		<img alt="" src="img/gourmet.jpg" onmouseover="this.src='img/gourmet_hover.jpg'" onmouseout="this.src='img/gourmet.jpg'" width="275" height="185" /> 
	</li>
</ul>

sirchote · #2 (**permalink**) 30/12/2013, 04:17

Muy buenas

Sigo necesitando un poquito de ayuda. He estado buscando y probando y sigo estancado igual

Nadie ha intentado hacer esto nunca?

Un saludo!

moriorGames · #3 (**permalink**) 30/12/2013, 10:06

Hola compañero, no entiendo muy bien lo que quieres hacer pero me da la sensación que sí puedes hacer lo que pides. Hacer fadein o fadeout con javascript debería ser algo bastante trivial, ya sea en hover o click o lo que sea. Te dejo un código rápido que he hecho, he probado y funciona, mira a ver so lo puedes adaptar a lo tuyo.

Código PHP:

  <!DOCTYPE html> 
<html> 
    <head> 
        <title>Prueba fade js</title> 
        <style> 
            div { 
                position: relative; 
                overflow: hidden; 
                height: 200px; 
                width: 200px; 
            } 
            img { 
                position: absolute; 
            } 
            #image2 { 
                display: none; 
            } 
        </style> 
    </head> 
    <body> 
    <div id="hover"> 
        <img id="image1" src="tuimagen1.jpg" /> 
        <img id="image2" src="tuimagen2.jpg"/> 
    </div> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function(){ 
            $('#hover').hover(function(){ 
                $('#image1').fadeOut(); 
                $('#image2').fadeIn(); 
            }, function(){ 
                $('#image2').fadeOut(); 
                $('#image1').fadeIn(); 
            }); 
        }); 
    </script> 
    </body> 
</html>

Alexis88 · #4 (**permalink**) 30/12/2013, 10:47

Trabaja con el método hover que realiza lo mismo que los eventos onmouseover y onmouseout.

Código Javascript:

Ver original$(".mask img").hover(function(){
  var $img = $(this);
  $img.fadeOut(800, function(){
    $(this).prop("src", "imagen1.jpg");
  }).fadeIn(800);
}, function(){
  var $img = $(this);
  $img.fadeOut(800, function(){
    $(this).prop("src", "imagen2.jpg");
  }).fadeIn(800);
});

Cuando se pose el puntero del mouse sobre la imagen, se ejecutará el método fadeOut que ocultará la imagen. Al término de esta acción, se cambiará la imagen por una nueva y finalmente, se vuelve a mostrar la imagen con el método fadeIn, pero con la nueva imagen de fondo. Cuando se retire el puntero del mouse de la imagen, se producirá lo mismo que al comienzo, con la diferencia que se intercambiará de imágenes, la antigua se restablecerá y la nueva se retirará. La transición dura 800 milésimas de segundo, pero puedes cambiar dicho valor.

Aquí puedes ver el ejemplo en acción.

Saludos

sirchote · #5 (**permalink**) 30/12/2013, 15:04

Muchas gracias, voy a intentar lo que me comentais