用jquery创建渐隐的背景效果

这是一段1K左右大小的代码,实现效果为逐渐消失()的背景.

先来个[演示]吧…[ 下载地址 ]

制作过程:

1.加载jquery库

当然是要加载jquery,你可以从jquery网站下载一个.我这边是在google上调用的.

[sourcecode language='php']

[/sourcecode]

2.HTML
[sourcecode language='php']

点击字出现渐隐背景效果
我是一段文字,点击上面的玩意儿可以让
我出现一个背景渐隐的效果。
[/sourcecode]

3.CSS

[sourcecode language='css']
.row1{
padding: 10px;
cursor:pointer;
text-decoration: underline;
}
#box {
padding: 10px 5px 5px 20px;
width:400px;
z-index:2;
position:absolute;
}
.box1 {
background-color: #00a0c8;
border: 1px solid #cccccc;
width:410px;
height:70px;
position:absolute;
margin: 5px;
top:45px;
z-index:1;
opacity:0.00;
}
[/sourcecode]

4.function

[sourcecode language='php']

$(function(){
$(‘.row1′).click(function(){
$(‘.box1′).animate({opacity:0.99}, 1000);
$(‘.box1′).animate({opacity:0}, 1000);
});
});

[/sourcecode]

完……了.就这么简单.
[ theodin ]

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>