jQuery, efecto fade de una imagen en otra

2
4902

Este ejemplo muestra como aplicar jQuery para mostrar efecto fade de una imagen sobre otra al situar el puntero del mouse.

Uso:

HTML:

<div id="ejemplo_fade">
    	<img src="http://www.webintenta.com/img/fashion1.jpg" />
</div>

CSS:

#ejemplo_fade{
	background:url("img/fashion2.jpg");
	position:relative;
	width:200px;
	height:200px;
	cursor:pointer;
}

JAVASCRIPT:

$(document).ready(function() {
	
    $("#ejemplo_fade").hover(function(){
        $(this).find("img").fadeOut();
    }, function() {
        $(this).find("img").fadeIn();
    });	

});

Vía WebIntenta | Demo

2 COMENTARIOS

  1. Hola! tengo un problema, lo que pasa es que en el centro de pagina quiero que aparezca una imagen pero que tenga un efecto y que despues de cierto tiempo se desplace hacia la isquierda..

    Espero me puedas ayudar..

Comments are closed.