fading from div to image in jquery

Question

I have a <div> setup as such:

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

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

What I want to do is have this <div> fade into a image that will be of the same size on mouse over then fade out when the mouse exits.

Would it be better to have a background image of the grey and then fade between the two images?

How would I accomplish this?

Answer 1

You create a hidden image somewhere. When the user mouses over the div, you position the image over it and fade it in.

Translating the previous sentence in jQuery code is left as an exercise for the reader :)

Answer 2

You can use absolute positioning and 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"/>