jquery中从div到image的淡入

我有这样一个

设置：

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

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

#菜单(一)
{
高度：50px；
宽度：150px；
背景色：#666666；
}

我想做的是让这个

淡入一个图像，该图像在鼠标上的大小相同，然后在鼠标退出时淡出

有一个灰色的背景图像，然后在两个图像之间淡入淡出会更好吗

---

我将如何实现这一点？

您将在某处创建一个隐藏图像。当用户将鼠标移到div上时，您将图像放置在div上并淡入淡入

---

翻译jQuery代码中的前一句话留给读者作为练习：）

您可以使用绝对定位和z索引：

<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"/>

#菜单
{
位置：绝对位置；
顶部：0px；
高度：50px；
宽度：150px；
背景色：#666666；
z指数：0；
}
#伊姆格迪夫
{
位置：绝对位置；
顶部：0px；
高度：50px；
宽度：150px；
z指数：-1；
}
$（函数（）{
$（“#菜单一”）.mouseover（函数（）{
$（“菜单一”）.fadeOut（）；
});
$（“#imgDiv”）.mouseout（函数（）{
$（“菜单一”）.fadeIn（）；
});    
});

您的解决方案似乎比我一直玩的这个简单得多：有什么理由不按您的方式做吗？我只在Firefox中测试了我的解决方案。它还需要样式、脚本和html代码才能工作。您链接到的解决方案捆绑为插件，不需要额外的html元素或css。然而，它只适合将一个图像淡入另一个图像。我想如果你需要将一个div淡入图像，你可以很容易地进行修改，但你必须自己尝试。