la décoloration de div à l'image dans jquery

Question

J'ai <div> configuration en tant que tel:

#menu_one 
{ 
    height:50px; 
    width:150px; 
    background-color:#666666; 
} 
</style> 

<div id="menu_one"></div> 

Ce que je veux faire est d'avoir ce <div> fondu en une image qui sera de la même taille sur la souris disparaît alors à la sortie de la souris.

Serait-il préférable d'avoir une image de fond du gris, puis fondu entre les deux images?

Comment est-ce que j'accomplirais ceci?

Answer 1

Vous créez une image cachée quelque part. Lorsque les souris de l'utilisateur sur la div, vous placez l'image dessus et fondu.

Traduire la phrase précédente dans le code jQuery est laissé comme un exercice pour le lecteur :)

Answer 2

Vous pouvez utiliser le positionnement absolu et z-index:

<style> 
#menu_one 
{ 
    position: absolute; 
    top: 0px; 
    height:50px; 
    width:150px; 
    background-color:#666666; 
    z-index: 0; 
} 
#imgDiv 
{ 
    position: absolute; 
    top: 0px; 
    height:50px; 
    width:150px; 
    z-index: -1; 
} 
</style> 

<script> 
$(function(){ 
    $("#menu_one").mouseover(function() { 
     $("#menu_one").fadeOut(); 
    }); 
    $("#imgDiv").mouseout(function() { 
     $("#menu_one").fadeIn(); 
    });  
}); 
</script> 

<div id="menu_one"></div> 
<div id="imgDiv"><img src="image.png"/>