在 div 上创建淡出效果

Question

我在创建这个时遇到了麻烦。

我使用 jQuery 作为我的主要 JS 库。我想使用 fade() 函数创建一个 div，当鼠标悬停时，它会淡出以显示下面的内容。

举例来说，一个具有灰色背景的 div，顶部有一个图像，该图像会淡出以显示下面的内容。这可能吗？我不太擅长 JS/jQuery

Answer 1

像这样的http://jsfiddle.net/dkpgQ/2/？

编辑：代码...

HTML

<div id="container">
    <div id="content">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
    </div>
    <div id="overlay">
    </div>
</div>

Javascript

$("#overlay").mouseover(function() {
   $("#overlay").fadeOut("slow"); 
});

CSS

#container {
    position:relative;
    width:200px;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:grey;
}

Answer 2

您可以使用 jquery

$('#book').fadeOut('slow', function() {
   // Animation complete.
});

这个链接包含更多说明。

或者您可以使用 jquery animate 函数，如链接中所述