在div上创建淡出效果

时间:2011-05-05 13:23:09

标签: javascript jquery html fade

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

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

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

您可以使用jquery

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

link包含更多解释。

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

中所述