Question

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

我使用jQuery作为我的主要JS库。我想使用fade（）函数创建一个div，当翻转时它会淡化以显示下面的内容。

比如说一个灰色背景的div，顶部有一个图像，它会淡化以显示下面的内容。这可能吗？我对JS / jQuery不是很好

Answer 1

编辑：代码......

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.
});

此link包含更多解释。

或者您可以使用jquery animate函数，如本link

中所述

在div上创建淡出效果

2 个答案: